Ottieni un array di contenuti degli elementi dell'elenco in jQuery

101

Ho una struttura come questa:

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

Come si usa javascript o jQuery per ottenere il testo come un array?

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

Il mio piano dopo questo è di assemblarlo in una stringa, probabilmente usando .join(', '), e ottenerlo in un formato come questo:

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

javascript jquery

— Christian Oudard
fonte

141

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

... dovrebbe fare il trucco. Per ottenere l'output finale che stai cercando, join()più qualche concatenazione andrà bene:

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

— Shog9
fonte

2

JQuery garantisce un ordine agli elementi restituiti dalla query? Presumo che l'ordine restituito sia lo stesso dell'ordine nel DOM (cioè text1, text2, text3), ma non so cosa cercare nella documentazione per vedere se è vero.

— stile

2

Non l'ho mai visto attraversare il DOM in un modo diverso dal normale ordine di lettura. Quindi, anche se non posso provarlo, scommetterei che la fattoria attraversa sempre il DOM dall'alto verso il basso :)

— Flater

$ .Each non è considerato avere una cattiva prestazione? Se sì, c'è un altro modo per farlo?

— Daniel

Quanti elementi della lista hai che questo è un problema, @Daniel? Sì, ci sono altri modi per fare la stessa cosa (potresti usare $ .map () per generare l'array in una volta sola), ma equivalgono alla stessa cosa.

— Shog9

@ Shog9: desidero inserire un dizionario nell'elenco prendendo i valori da due colonne diverse da ciascuna riga di una tabella. Non c'è un modo più semplice per farlo? Grazie in anticipo.

— ln2khanal

71

Senza array intermedi ridondanti:

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

Guarda la demo di jsfiddle

— Alex Nolasco
fonte

6

Ti manca .get()alla fine.

— Felix Kling

4

Basato sul suggerimento di Felix Klings: arr = $ ('li'). Map (function () {return $ (this) .text ();}). Get ();

— Emil Stenström

1

non capisco perché "get function" sia necessaria.

— crsuarezf

1

api.jquery.com/map spiega perché è necessario un .get () ("Poiché il valore restituito è un array avvolto in jQuery, è molto comune che l'oggetto restituito funzioni con un array di base.").

— Kitto

3

La cosa peggiore è che l'iteratore è sbagliato, è necessario cambiare l'elemento e l'indice, in modo che dica funzione (i, el).

— Kitto

14

E in javascript pulito:

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
fonte

14

kimstik era vicino, ma non del tutto.

Ecco come farlo in un comodo one-liner:

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

Ecco la documentazione completa per la funzione map di jQuery, è abbastanza utile: http://api.jquery.com/jQuery.map/

Giusto per rispondere in modo completo, ecco la funzionalità completa che stavi cercando:

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

— Cybolic
fonte

L'ho appena visto qui ( stackoverflow.com/questions/4856283/… ) e stavo per ripubblicare poiché è un grande trucco da sapere

— SeanDowney

La mia strada dovrebbe essere un po 'più veloce .. o no?

— kimstik

1

kimstik, secondo Benchmark.js, la mia chiamata di funzione fa 11.252 / 9.685 operazioni / sec rispettivamente per Opera e Chrome, mentre la chiamata al metodo che hai pubblicato fa 9.666 / 9.083 operazioni / sec su un elenco di 40 elementi. Penso che la differenza derivi dalla conversione dall'elenco di elementi jQuery ad Array nel tuo esempio, se questo aiuta. Sono molto vicini, quindi scegli quello che si adatta meglio al tuo stile di codifica :)

— Cybolic

6

var arr = new Array();

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

— Dave Ward
fonte

1

Invece di fare affidamento su innerHTML, dovresti cambiare "this" in un oggetto jQuery e utilizzare il metodo di testo nativo jQuery. $ (this) .text ()

— Nathan Strutz,

3

perché? alla fine $ (this) .html () utilizzerà il metodo nativo

— Khodor

In questo caso è meglio usare [] al posto del nuovo Array () - Qual è la differenza

— krypru

2

Puoi fare come segue. una riga di codice sarà sufficiente

let array = $('ul>li').toArray().map(item => $(item).html());
Ottieni l'elemento interessato
1. ottenere figli
2. ottenere l'array dal metodo toArray ()
3. filtra i risultati desiderati

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>

Espandi lo snippet

— NuOne
fonte