Pobierz tablicę zawartości elementów listy w jQuery

101

Mam taką strukturę:

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

Jak używać javascript lub jQuery, aby uzyskać tekst jako tablicę?

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

Mój plan po tym polega na złożeniu go w ciąg, prawdopodobnie przy użyciu .join(', ')i uzyskanie go w formacie takim jak ten:

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

javascript jquery

— Christian Oudard
źródło

141

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

... powinien załatwić sprawę. Aby uzyskać ostateczny wynik, którego szukasz, join()plus trochę konkatenacji dobrze się nada:

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

— Shog9
źródło

2

Czy jQuery gwarantuje porządek elementów zwracanych przez zapytanie? Zakładałbym, że zwracana kolejność jest taka sama, jak kolejność w DOM (np. Text1, text2, text3), ale nie wiem, czego szukać w dokumentacji, aby sprawdzić, czy to prawda.

— styfle

2

Nigdy nie widziałem, żeby przechodził przez DOM w inny sposób niż normalna kolejność czytania. Więc chociaż nie mogę tego udowodnić, założę się, że farma zawsze przechodzi przez DOM z góry na dół :)

— Flater

Czy $ .each nie ma złych wyników? Jeśli tak, czy jest inny sposób, aby to zrobić?

— Daniel

Ile masz pozycji na liście, że to jest problem, @Daniel? Tak, są inne sposoby, aby zrobić to samo (możesz użyć $ .map () do wygenerowania tablicy za jednym razem), ale sprowadzają się one do tego samego.

— Shog9

@ Shog9: Chciałbym wypchnąć słownik na listę, pobierając wartości z dwóch różnych kolumn z każdego wiersza tabeli. Czy nie ma na to prostszego sposobu? Z góry dziękuję.

— ln2khanal

71

Bez nadmiarowych macierzy pośrednich:

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

Zobacz demo jsfiddle

— Alex Nolasco
źródło

6

Tęsknisz .get()na końcu.

— Felix Kling

4

Na podstawie sugestii Felixa Klingsa: arr = $ ('li'). Map (function () {return $ (this) .text ();}). Get ();

— Emil Stenström

1

nie rozumiem, dlaczego „get function” jest konieczne.

— crsuarezf

1

api.jquery.com/map wyjaśnia, dlaczego konieczne jest użycie rozszerzenia .get () („Ponieważ wartość zwracana jest tablicą opakowaną w jQuery, bardzo często get () zwraca obiekt do pracy z podstawową tablicą.”).

— Kitto

3

Najgorsze jest to, że iterator jest zły, musisz zmienić element i indeks tak, aby zawierał funkcję (i, el).

— Kitto

14

I w czystym 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
źródło

14

kimstik był blisko, ale niezupełnie.

Oto jak to zrobić w wygodnej, jednolinijkowej wersji:

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

Oto pełna dokumentacja funkcji mapy jQuery, jest całkiem przydatna: http://api.jquery.com/jQuery.map/

Aby odpowiedzieć w pełni, oto pełna funkcjonalność, której szukałeś:

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

— Cybolic
źródło

Właśnie to widziałem tutaj ( stackoverflow.com/questions/4856283/… ) i zamierzałem ponownie opublikować, ponieważ jest to świetna sztuczka do poznania

— SeanDowney

Moja droga powinna być trochę szybsza… czy nie?

— kimstik

1

kimstik, według Benchmark.js, moje wywołanie funkcji wykonuje 11 252/9685 operacji / s odpowiednio dla Opery i Chrome, podczas gdy metoda, którą wysłałeś, robi 9 666/9 083 operacji na sekundę na liście 40 pozycji. Myślę, że różnica wynika z konwersji z listy elementów jQuery do Array w twoim przykładzie, jeśli to pomaga. Są bardzo blisko, więc wybierz ten, który lepiej pasuje do twojego stylu kodowania :)

— Cybolic

6

var arr = new Array();

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

— Dave Ward
źródło

1

Zamiast polegać na innerHTML, należy zmienić „this” na obiekt jQuery i użyć metody natywnego tekstu jQuery. $ (this) .text ()

— Nathan Strutz

3

czemu? ostatecznie $ (this) .html () użyje metody natywnej

— Khodor,

W tym przypadku lepiej jest użyć [] zamiast nowego Array () - Jaka jest różnica

— krypru

2

Możesz wykonać następujące czynności. wystarczy jedna linia kodu

let array = $('ul>li').toArray().map(item => $(item).html());
Zdobądź zainteresowany element
1. dostać dzieci
2. pobierz tablicę z metody toArray ()
3. odfiltruj żądane wyniki

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>

Rozwiń fragment

— NuOne
źródło