Ruft ein Array mit Listenelementinhalten in jQuery ab

101

Ich habe eine Struktur wie diese:

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

Wie verwende ich Javascript oder jQuery, um den Text als Array abzurufen?

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

Mein Plan danach ist es, es zu einem String zusammenzusetzen, wahrscheinlich unter Verwendung .join(', '), und es in einem Format wie diesem zu erhalten:

'"text1", "text2", "text3"'
Christian Oudard
quelle

Antworten:

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

... sollte den Trick machen. Um die endgültige Ausgabe zu erhalten, die Sie suchen, join()und einige Verkettungen sind gut geeignet:

var quotedCSV = '"' + optionTexts.join('", "') + '"';
Shog9
quelle
2
Garantiert jQuery eine Reihenfolge für die von der Abfrage zurückgegebenen Elemente? Ich würde annehmen, dass die zurückgegebene Bestellung mit der Bestellung im DOM übereinstimmt (dh Text1, Text2, Text3), aber ich weiß nicht, wonach ich in der Dokumentation suchen soll, um festzustellen, ob dies der Fall ist.
Styfle
2
Ich habe noch nie gesehen, dass es das DOM auf eine andere Weise als in der normalen Lesereihenfolge durchquert. Also, obwohl ich es nicht beweisen kann, würde ich wetten, dass die Farm immer das DOM von oben nach unten durchquert :)
Flater
Wird $ .each nicht als schlecht angesehen? Wenn ja, gibt es eine andere Möglichkeit?
Daniel
Wie viele Listenelemente haben Sie, dass dies ein Problem ist, @Daniel? Ja, es gibt andere Möglichkeiten, dasselbe zu tun (Sie könnten $ .map () verwenden, um das Array auf einmal zu generieren), aber sie sind dasselbe.
Shog9
@ Shog9: Ich möchte ein Wörterbuch in die Liste verschieben, wobei Werte aus zwei verschiedenen Spalten aus jeder Zeile einer Tabelle übernommen werden. Gibt es nicht einen einfacheren Weg, das zu tun? Danke im Voraus.
ln2khanal
71

Ohne redundante Zwischenarrays:

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

Siehe jsfiddle- Demo

Alex Nolasco
quelle
6
Sie vermissen .get()am Ende.
Felix Kling
4
Basierend auf dem Vorschlag von Felix Klings: arr = $ ('li'). Map (function () {return $ (this) .text ();}). Get ();
Emil Stenström
1
Ich verstehe nicht, warum "get function" notwendig ist.
Crsuarezf
1
api.jquery.com/map erklärt, warum ein .get () erforderlich ist ("Da der Rückgabewert ein von jQuery umschlossenes Array ist, wird das zurückgegebene Objekt häufig () für die Arbeit mit einem Basisarray verwendet.").
Kitto
3
Das Schlimmste ist, dass der Iterator falsch ist. Sie müssen das Element und den Index wechseln, damit dort Funktion (i, el) steht.
Kitto
14

Und in sauberem Javascript:

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
quelle
14

Kimstik war nah dran, aber nicht ganz.

So geht's in einem praktischen Einzeiler:

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

Hier ist die vollständige Dokumentation für die Kartenfunktion von jQuery. Sie ist sehr praktisch: http://api.jquery.com/jQuery.map/

Um vollständig zu antworten, finden Sie hier die vollständige Funktionalität, nach der Sie gesucht haben:

$.map( $('li'), function (element) { return $(element).text() }).join(', ');
Cybolic
quelle
Ich habe das gerade hier gesehen ( stackoverflow.com/questions/4856283/… ) und wollte es erneut veröffentlichen, da es ein großartiger Trick ist, es zu wissen
SeanDowney,
Mein Weg sollte etwas schneller sein .. oder nicht?
Kimstik
1
kimstik Laut Benchmark.js führt mein Funktionsaufruf 11.252 / 9.685 Operationen / Sek. für Opera bzw. Chrome aus, während der von Ihnen veröffentlichte Methodenaufruf 9.666 / 9.083 Operationen / Sek. für eine Liste von 40 Elementen ausführt. Ich denke, der Unterschied ergibt sich aus der Konvertierung von der jQuery-Elementliste in Array in Ihrem Beispiel, wenn dies hilft. Sie sind sehr nah, also wählen Sie, was besser zu Ihrem Codierungsstil passt :)
Cybolic
6
var arr = new Array();

$('li').each(function() { 
  arr.push(this.innerHTML); 
})
Dave Ward
quelle
1
Anstatt sich auf innerHTML zu verlassen, sollten Sie "this" in ein jQuery-Objekt ändern und die native Textmethode jQuery verwenden. $ (this) .text ()
Nathan Strutz
3
Warum? Schließlich wird $ (this) .html () die native Methode verwenden
Khodor
In diesem Fall ist es besser, [] anstelle des neuen Arrays () zu verwenden - Was ist der Unterschied
krypru
2

Sie können wie folgt vorgehen. Eine Codezeile reicht aus

  • let array = $('ul>li').toArray().map(item => $(item).html());
  • Holen Sie sich das interessierte Element

    1. Kinder bekommen

    2. Holen Sie sich das Array von der toArray () -Methode

    3. Filtern Sie die gewünschten Ergebnisse heraus

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>

NuOne
quelle