JQuery'de bir dizi liste öğesi içeriği alın

101

Bunun gibi bir yapım var:

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

Metni bir dizi olarak almak için javascript veya jQuery'yi nasıl kullanırım?

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

Bundan sonraki planım, muhtemelen kullanarak onu bir dizge halinde birleştirmek .join(', ')ve aşağıdaki gibi bir formatta elde etmektir :

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

javascript jquery

— Christian Oudard
kaynak

141

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

... hile yapmalı. Aradığınız son çıktıyı elde etmek için, join()artı bazı birleştirme iyi bir iş çıkaracaktır:

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

— Shog9
kaynak

2

JQuery, sorgu tarafından döndürülen öğelerin sırasını garanti ediyor mu? Döndürülen siparişin DOM'daki sıralama ile aynı olduğunu varsayardım (yani metin1, metin2, metin3), ancak bunun doğru olup olmadığını görmek için belgelerde neye bakacağımı bilmiyorum.

— styfle

2

DOM'u normal okuma sırasından başka bir şekilde geçtiğini hiç görmemiştim. Yani kanıtlayamasam da, çiftliğin her zaman DOM'u yukarıdan aşağıya geçtiğine bahse girerim :)

— Flater

$. Her biri kötü bir performansa sahip sayılmaz mı? Evet ise, bunu yapmanın başka bir yolu var mı?

— Daniel

Bunun bir sorun olduğuna dair kaç tane liste öğeniz var, @Daniel? Evet, aynı şeyi yapmanın başka yolları da var (diziyi tek seferde oluşturmak için $ .map () kullanabilirsiniz), ama bunlar aynı anlama geliyor.

— Shog9

@ Shog9: Bir tablonun her satırından iki farklı sütundan değer alan bir sözlüğü listeye itmek istiyorum. Bunu yapmanın daha kolay bir yolu yok mu? Şimdiden teşekkürler.

— ln2khanal

71

Yedek ara diziler olmadan:

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

Jsfiddle demosunu görün

— Alex Nolasco
kaynak

6

.get()Sonunda özlüyorsun .

— Felix Kling

4

Felix Klings önerisine göre: arr = $ ['li']. Map (function () {return $ (this) .text ();}). Get ();

— Emil Stenström

1

"işlev al" ın neden gerekli olduğunu anlamıyorum.

— crsuarezf

1

api.jquery.com/map , neden bir .get () gerekli olduğunu açıklar ("Dönüş değeri jQuery ile sarılmış bir dizi olduğundan, döndürülen nesnenin temel bir diziyle çalışmasını sağlamak () çok yaygındır.").

— Kitto

3

Daha da kötüsü, yineleyicinin yanlış olması, öğe ve dizini değiştirmeniz gerekiyor, böylece işlev (i, el) diyor.

— Kitto

14

Ve temiz javascript'te:

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
kaynak

14

kimstik yakındı, ama tam olarak değil.

İşte bunu uygun bir tek satırda nasıl yapacağınız:

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

İşte jQuery'nin harita işlevi için tam belgeler, oldukça kullanışlıdır: http://api.jquery.com/jQuery.map/

Tam olarak yanıtlamak için aradığınız tam işlevsellik şu şekildedir:

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

— Cybolic
kaynak

Bunu az önce burada gördüm ( stackoverflow.com/questions/4856283/… ) ve bilmek harika bir numara olduğu için yeniden

— yayınlayacaktım

Benim yolum biraz daha hızlı olmalı mı yoksa değil mi?

— kimstik

1

kimstik, Benchmark.js'ye göre, benim işlev çağrım Opera ve Chrome için sırasıyla 11.252 / 9.685 işlem / sn, gönderdiğiniz yöntem çağrısı ise 40 öğelik bir listede 9.666 / 9.083 işlem / sn yapıyor. Sanırım fark, örneğinizde jQuery element listesinden Array'e dönüşümden kaynaklanıyor, eğer yardımcı olursa. Çok yakınlar, bu yüzden kodlama stilinize daha uygun olanı seçin :)

— Cybolic

6

var arr = new Array();

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

— Dave Ward
kaynak

1

İnnerHTML'ye güvenmek yerine "this" i bir jQuery nesnesine değiştirmeli ve jQuery yerel metin yöntemini kullanmalısınız. $ (this) .text ()

— Nathan Strutz

3

neden? sonunda $ (this) .html () yerel yöntemi kullanacak

— Khodor

Bu durumda, new Array () yerine [] kullanmak daha iyidir

— Fark

2

Aşağıdaki gibi yapabilirsiniz. bir satır kod yeterli olacaktır

let array = $('ul>li').toArray().map(item => $(item).html());
İlgilenen öğeyi alın
1. çocukları al
2. diziyi toArray () yönteminden al
3. istediğiniz sonuçları filtreleyin

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>

Snippet'i genişlet

— NuOne
kaynak