jQuery에서 목록 요소 내용의 배열 가져 오기


101

다음과 같은 구조가 있습니다.

<ul>
  <li>text1</li>
  <li>text2</li>
  <li>text3</li>
</ul>

javascript 또는 jQuery를 사용하여 텍스트를 배열로 가져 오려면 어떻게해야합니까?

['text1', 'text2', 'text3']

이 후 내 계획은 아마를 사용하여 문자열로 조립하고 다음 .join(', ')과 같은 형식으로 가져 오는 것입니다.

'"text1", "text2", "text3"'

답변:


141
var optionTexts = [];
$("ul li").each(function() { optionTexts.push($(this).text()) });

... 트릭을해야합니다. 찾고있는 최종 출력을 얻으려면 join()몇 가지 연결이 잘 수행됩니다.

var quotedCSV = '"' + optionTexts.join('", "') + '"';

2
jQuery는 쿼리에서 반환 된 요소에 대한 순서를 보장합니까? 반환 된 순서가 DOM의 순서 (예 : text1, text2, text3)와 동일하다고 가정하지만 이것이 사실인지 확인하기 위해 문서에서 무엇을 찾아야하는지 모르겠습니다.
styfle 2011

2
나는 그것이 정상적인 읽기 순서와 다른 방식으로 DOM을 횡단하는 것을 본 적이 없습니다. 그래서 증명할 수는 없지만, 농장이 DOM을 위에서 아래로 순회한다고 확신합니다. :)
Flater

$ .each의 성능이 좋지 않은 것으로 간주되지 않습니까? 그렇다면 다른 방법이 있습니까?
Daniel

@Daniel, 이것이 문제인 목록 항목이 몇 개 있습니까? 예, 동일한 작업을 수행하는 다른 방법이 있습니다 ($ .map ()을 사용하여 한 번에 배열을 생성 할 수 있음).하지만 동일한 작업에 해당합니다.
Shog9 2013

@ Shog9 : 테이블의 각 행에서 두 개의 다른 열에서 값을 가져 오는 사전을 목록에 푸시하고 싶습니다. 그렇게하는 더 쉬운 방법이 없습니까? 미리 감사드립니다.
ln2khanal

71

중복 중간 어레이가없는 경우 :

arr = $('li').map(function(i,el) {
    return $(el).text();
}).get();

jsfiddle 데모 보기


6
당신 .get()은 결국 그리워 합니다.
Felix Kling 2011 년

4
Felix Klings 제안에 따라 : arr = $ ( 'li'). map (function () {return $ (this) .text ();}). get ();
Emil Stenström 2011 년

1
"기능 가져 오기"가 필요한 이유를 이해하지 못합니다.
crsuarezf 2011

1
api.jquery.com/map 은 .get ()이 필요한 이유를 설명합니다.
Kitto

3
더 나쁜 것은 반복기가 잘못되었다는 것입니다. 요소와 인덱스를 전환하여 function (i, el)이라고합니다.
Kitto

14

그리고 깨끗한 자바 스크립트에서 :

var texts = [], lis = document.getElementsByTagName("li");
for(var i=0, im=lis.length; im>i; i++)
  texts.push(lis[i].firstChild.nodeValue);

alert(texts);

14

킴 스틱은 가까웠지만 정답은 아니었다.

편리한 한 줄로 수행하는 방법은 다음과 같습니다.

$.map( $('li'), function (element) { return $(element).text() });

다음은 jQuery의지도 기능에 대한 전체 문서입니다. 매우 편리합니다. http://api.jquery.com/jQuery.map/

완전히 대답하기 위해 찾고 있던 전체 기능은 다음과 같습니다.

$.map( $('li'), function (element) { return $(element).text() }).join(', ');

난 그냥 여기를보고 ( stackoverflow.com/questions/4856283/... 이 알 수있는 좋은 트릭 이후) 및거야 재 게시했다
SeanDowney

내 길은 좀 더 빨라야 겠어 ..
kimstik

1
kimstik에 따르면 Benchmark.js에 따르면 내 함수 호출은 Opera와 Chrome에 대해 각각 11,252 / 9,685 ops / sec를 수행하는 반면 게시 한 메서드 호출은 40 개 항목 목록에서 9,666 / 9,083 ops / sec를 수행합니다. 도움이된다면 차이점은 jQuery 요소 목록에서 Array 로의 변환에서 비롯된 것이라고 생각합니다. 그들은 너무 중 정장 코딩 스타일의 더 나은 : 선택, 매우 가까이있어
Cybolic

6
var arr = new Array();

$('li').each(function() { 
  arr.push(this.innerHTML); 
})

1
innerHTML에 의존하는 대신 "this"를 jQuery 객체로 변경하고 jQuery 네이티브 텍스트 메서드를 사용해야합니다. $ (this) .text ()
Nathan Strutz

3
왜? 결국 $ (this) .html ()은 네이티브 메서드를 사용합니다
Khodor

이 경우는 새로운 배열 () 대신 []를 사용하는 것이 좋습니다 - 차이 무엇입니까
krypru

2

다음과 같이 할 수 있습니다. 코드 한 줄이면 충분합니다

  • let array = $('ul>li').toArray().map(item => $(item).html());
  • 관심있는 요소 얻기

    1. 아이를 낳다

    2. toArray () 메서드에서 배열 가져 오기

    3. 원하는 결과를 필터링

let array = $('ul>li').toArray().map(item => $(item).html());
console.log(array);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>text1</li>
  <li>text2</li>
  <li>text3</li>
</ul>

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.