Dapatkan array konten elemen daftar di jQuery

101

Saya memiliki struktur seperti ini:

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

Bagaimana cara menggunakan javascript atau jQuery untuk mendapatkan teks sebagai array?

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

Rencana saya setelah ini adalah merakitnya menjadi string, mungkin menggunakan .join(', '), dan mendapatkannya dalam format seperti ini:

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

javascript jquery

— Christian Oudard
sumber

141

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

... harus melakukan triknya. Untuk mendapatkan hasil akhir yang Anda cari, join()ditambah beberapa penggabungan akan bekerja dengan baik:

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

— Shog9
sumber

2

Apakah jQuery menjamin pesanan ke elemen yang dikembalikan oleh kueri? Saya berasumsi bahwa pesanan yang dikembalikan sama dengan urutan di DOM (yaitu teks1, teks2, teks3), tetapi saya tidak tahu apa yang harus dicari dalam dokumentasi untuk melihat apakah ini benar.

— styfle

2

Saya belum pernah melihatnya melintasi DOM dengan cara lain seperti urutan membaca normal. Jadi meskipun saya tidak dapat membuktikannya, saya berani bertaruh bahwa pertanian itu selalu melintasi DOM dari atas ke bawah :)

— Flater

Bukankah $ .each dianggap memiliki kinerja yang buruk? Jika ya, apakah ada cara lain untuk melakukannya?

— Daniel

Berapa banyak item daftar yang Anda miliki yang menjadi masalah, @Daniel? Ya, ada cara lain untuk melakukan hal yang sama (Anda bisa menggunakan $ .map () untuk menghasilkan array sekaligus), tetapi jumlahnya sama.

— Shog9

@ Shog9: Saya ingin memasukkan kamus ke daftar yang mengambil nilai dari dua kolom berbeda dari setiap baris tabel. Bukankah ada cara yang lebih mudah untuk melakukan itu? Terima kasih sebelumnya.

— ln2khanal

71

Tanpa larik perantara yang redundan:

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

Lihat demo jsfiddle

— Alex Nolasco
sumber

6

Anda merindukan .get()di akhir.

— Felix Kling

4

Berdasarkan saran Felix Klings: arr = $ ('li'). Map (function () {return $ (this) .text ();}). Get ();

— Emil Stenström

1

saya tidak mengerti mengapa "get function" diperlukan.

— crsuarezf

1

api.jquery.com/map menjelaskan mengapa ada .get () diperlukan ("Karena nilai yang dikembalikan adalah larik yang dibungkus jQuery, sangat umum untuk mendapatkan () objek yang dikembalikan untuk bekerja dengan larik dasar.").

— Kitto

3

Hal yang lebih buruk adalah, iteratornya salah, Anda perlu mengganti elemen dan indeks, sehingga dikatakan function (i, el).

— Kitto

14

Dan dalam javascript bersih:

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

alert(texts);

— roenving
sumber

14

kimstik memang mirip, tapi kurang tepat.

Berikut cara melakukannya dalam satu baris yang nyaman:

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

Berikut dokumentasi lengkap untuk fungsi peta jQuery, ini cukup berguna: http://api.jquery.com/jQuery.map/

Sekadar menjawab sepenuhnya, inilah fungsionalitas lengkap yang Anda cari:

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

— Cybolic
sumber

Saya baru saja melihat ini di sini ( stackoverflow.com/questions/4856283/… ) dan akan memposting ulang karena ini adalah trik yang bagus untuk diketahui

— SeanDowney

Jalan saya harus sedikit lebih cepat .. atau tidak?

— kimstik

1

kimstik, menurut Benchmark.js, panggilan fungsi saya masing-masing melakukan 11.252 / 9.685 ops / detik untuk Opera dan Chrome, sedangkan panggilan metode yang Anda posting melakukan 9.666 / 9.083 ops / detik pada daftar 40 item. Saya pikir perbedaannya berasal dari konversi dari daftar elemen jQuery ke Array dalam contoh Anda, jika itu membantu. Mereka sangat dekat, jadi pilih mana yang lebih sesuai dengan gaya pengkodean Anda :)

— Cybolic

6

var arr = new Array();

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

— Dave Ward
sumber

1

Daripada mengandalkan innerHTML, Anda harus mengubah "ini" menjadi objek jQuery dan menggunakan metode teks asli jQuery. $ (this) .text ()

— Nathan Strutz

3

Mengapa? akhirnya $ (this) .html () akan menggunakan metode asli

— Khodor

Dalam hal ini lebih baik menggunakan [] daripada Array baru () - Apa bedanya

— krypru

2

Anda dapat melakukan sebagai berikut. satu baris kode sudah cukup

let array = $('ul>li').toArray().map(item => $(item).html());
Dapatkan elemen yang menarik
1. mendapatkan anak
2. dapatkan array dari metode toArray ()
3. filter hasil yang Anda inginkan

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>

Luaskan cuplikan

— NuOne
sumber