Nhận một mảng nội dung phần tử danh sách trong jQuery

101

Tôi có một cấu trúc như thế này:

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

Làm cách nào để sử dụng javascript hoặc jQuery để lấy văn bản dưới dạng một mảng?

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

Kế hoạch của tôi sau này là tập hợp nó thành một chuỗi, có thể là sử dụng .join(', ')và lấy nó ở định dạng như sau:

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

javascript jquery

— Christian Oudard
nguồn

141

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

... nên làm thủ thuật. Để có được kết quả cuối cùng mà bạn đang tìm kiếm, join()cộng với một số cách ghép nối sẽ hoạt động độc đáo:

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

— Shog9
nguồn

2

JQuery có đảm bảo thứ tự cho các phần tử được trả về bởi truy vấn không? Tôi giả định rằng thứ tự được trả về giống với thứ tự trong DOM (tức là text1, text2, text3), nhưng tôi không biết phải tìm kiếm những gì trong tài liệu để xem điều này có đúng không.

— súng trường

2

Tôi chưa bao giờ thấy nó đi qua DOM theo bất kỳ cách nào khác mà thứ tự đọc bình thường. Vì vậy, mặc dù tôi không thể chứng minh điều đó, tôi sẽ đặt cược rằng trang trại đó sẽ luôn đi ngang qua DOM từ đầu đến cuối :)

— Flater

Không phải $ .each được coi là có hiệu suất kém? Nếu có, có cách nào khác để làm điều đó không?

— Daniel

Bạn có bao nhiêu mục danh sách mà đây là một vấn đề, @Daniel? Vâng, có những cách khác để làm điều tương tự (bạn có thể sử dụng $ .map () để tạo mảng trong một lần), nhưng chúng đều giống nhau.

— Shog9

@ Shog9: Tôi muốn đẩy một từ điển vào danh sách lấy các giá trị từ hai cột khác nhau từ mỗi hàng của bảng. Không có cách nào dễ dàng hơn để làm điều đó? Cảm ơn trước.

— ln2khanal

71

Không có mảng trung gian dư thừa:

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

Xem jsfiddle demo

— Alex Nolasco
nguồn

6

Bạn bỏ lỡ .get()ở cuối.

— Felix Kling

4

Dựa trên gợi ý của Felix Klings: arr = $ ('li'). Map (function () {return $ (this) .text ();}). Get ();

— Emil Stenström

1

tôi không hiểu tại sao "lấy chức năng" là cần thiết.

— crsuarezf,

1

api.jquery.com/map giải thích tại sao cần có .get () ("Vì giá trị trả về là một mảng được bao bọc bởi jQuery, nên việc lấy () đối tượng trả về hoạt động với một mảng cơ bản là rất phổ biến.").

— Kitto

3

Điều tồi tệ hơn là trình lặp sai, bạn cần chuyển đổi phần tử và chỉ mục, để nó nói là hàm (i, el).

— Kitto

14

Và trong javascript sạch:

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

alert(texts);

— lang thang
nguồn

14

kimstik là gần, nhưng không khá.

Đây là cách thực hiện điều đó trong một lớp lót tiện lợi:

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

Đây là tài liệu đầy đủ về chức năng bản đồ của jQuery, nó khá tiện dụng: http://api.jquery.com/jQuery.map/

Chỉ cần trả lời đầy đủ, đây là chức năng đầy đủ mà bạn đang tìm kiếm:

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

— Cybolic
nguồn

Tôi chỉ thấy điều này ở đây ( stackoverflow.com/questions/4856283/... ) và là sẽ repost vì nó là một mẹo tuyệt vời để biết

— SeanDowney

Con đường của tôi có nên nhanh hơn một chút .. hay không?

— kimstik

1

kimstik, theo Benchmark.js, lệnh gọi hàm của tôi thực hiện 11.252 / 9.685 ops / giây tương ứng cho Opera và Chrome, trong khi lệnh gọi phương thức bạn đã đăng đạt 9.666 / 9.083 ops / giây trên danh sách 40 mục. Tôi nghĩ sự khác biệt đến từ việc chuyển đổi từ danh sách phần tử jQuery thành Mảng trong ví dụ của bạn, nếu điều đó hữu ích. Họ đang rất gần, nên chọn cái nào phù hợp với phong cách mã hóa của bạn tốt hơn :)

— Cybolic

6

var arr = new Array();

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

— Dave Ward
nguồn

1

Thay vì dựa vào innerHTML, bạn nên thay đổi "this" thành một đối tượng jQuery và sử dụng phương thức văn bản gốc jQuery. $ (this) .text ()

— Nathan Strutz 29/10/08

3

tại sao? cuối cùng $ .html (this) () sẽ sử dụng phương pháp tự nhiên

— Khodor

Trong trường hợp này, tốt hơn nên sử dụng [] thay vì Mảng mới () - Sự khác biệt là gì

— krypru

2

Bạn có thể làm như sau. một dòng mã sẽ là đủ

let array = $('ul>li').toArray().map(item => $(item).html());
Nhận phần tử quan tâm
1. có con
2. lấy mảng từ phương thức toArray ()
3. lọc ra kết quả bạn muốn

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>

Mở rộng đoạn mã

— NuOne
nguồn