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

Question 1

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"'

Question 2

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('", "') + '"';

Question 3

Bez nadmiarowych macierzy pośrednich:

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

Zobacz demo jsfiddle

Question 4

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);

Question 5

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(', ');

Question 6

var arr = new Array();

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

Question 7

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

Answer 1

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"'

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

Daniel

Answer 6

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

Answer 7

@ 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

Answer 8

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

Answer 9

6

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

Felix Kling

Answer 10

4

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

Emil Stenström

Answer 11

1

nie rozumiem, dlaczego „get function” jest konieczne.

crsuarezf

Answer 12

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

Answer 13

3

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

Kitto

Answer 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);

Answer 15

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

Answer 16

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

SeanDowney

Answer 17

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

kimstik

Answer 18

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

Answer 19

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

Answer 20

1

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

Nathan Strutz

Answer 21

3

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

Khodor,

Answer 22

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

krypru

Answer 23

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

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

Odpowiedzi: