Obtenha uma matriz de conteúdo de elemento de lista em jQuery

101

Eu tenho uma estrutura assim:

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

Como faço para usar javascript ou jQuery para obter o texto como uma matriz?

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

Meu plano depois disso é montá-lo em uma string, provavelmente usando .join(', '), e obtê-lo em um formato como este:

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

Respostas:

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

... deve fazer o truque. Para obter o resultado final que você está procurando, join()além de alguma concatenação fará bem:

var quotedCSV = '"' + optionTexts.join('", "') + '"';
Shog9
fonte
2
O jQuery garante uma ordem para os elementos retornados pela consulta? Eu diria que a ordem retornada é a mesma que a ordem no DOM (ou seja, text1, text2, text3), mas não sei o que procurar na documentação para ver se isso é verdade.
styfle
2
Eu nunca o vi atravessar o DOM de qualquer outra forma que a ordem de leitura normal. Portanto, embora eu não possa provar, aposto que a fazenda sempre atravessa o DOM de cima para baixo :)
Flater
$ .Each não é considerado como tendo um desempenho ruim? Se sim, existe outra forma de o fazer?
Daniel
Quantos itens da lista você possui que isso é um problema, @Daniel? Sim, existem outras maneiras de fazer a mesma coisa (você poderia usar $ .map () para gerar o array de uma vez), mas elas resultam na mesma coisa.
Shog9 01 de
@ Shog9: Desejo empurrar um dicionário para a lista obtendo valores de duas colunas diferentes de cada linha de uma tabela. Não há maneira mais fácil de fazer isso? Desde já, obrigado.
ln2khanal
71

Sem matrizes intermediárias redundantes:

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

Veja a demonstração do jsfiddle

Alex Nolasco
fonte
6
Você perde .get()no final.
Felix Kling
4
Baseado na sugestão de Felix Klings: arr = $ ('li'). Map (function () {return $ (this) .text ();}). Get ();
Emil Stenström,
1
Eu não entendo por que "get function" é necessário.
crsuarezf
1
api.jquery.com/map explica porque há um .get () necessário ("Como o valor de retorno é um array embrulhado em jQuery, é muito comum get () o objeto retornado para trabalhar com um array básico.").
Kitto
3
O pior é que o iterador está errado, você precisa trocar o elemento e o índice, para que ele diga function (i, el).
Kitto
14

E em javascript limpo:

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 estava perto, mas não exatamente.

Veja como fazer isso em uma linha simples:

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

Aqui está a documentação completa para a função de mapa do jQuery, é bastante útil: http://api.jquery.com/jQuery.map/

Apenas para responder de forma completa, aqui está a funcionalidade completa que você estava procurando:

$.map( $('li'), function (element) { return $(element).text() }).join(', ');
Cybolic
fonte
Acabei de ver isso aqui ( stackoverflow.com/questions/4856283/… ) e ia repassar, pois é um ótimo truque de saber
SeanDowney
Meu caminho deve ser um pouco mais rápido .. ou não?
Kimstik
1
kimstik, de acordo com Benchmark.js, minha chamada de função faz 11.252 / 9.685 ops / seg para Opera e Chrome respectivamente, enquanto a chamada de método que você postou faz 9.666 / 9.083 ops / seg em uma lista de 40 itens. Acho que a diferença vem da conversão da lista de elementos jQuery para Array em seu exemplo, se isso ajudar. Eles são muito próximos, então escolha o que for mais adequado ao seu estilo de codificação :)
Cybolic,
6
var arr = new Array();

$('li').each(function() { 
  arr.push(this.innerHTML); 
})
Dave Ward
fonte
1
Em vez de depender de innerHTML, você deve alterar "this" para um objeto jQuery e usar o método de texto nativo jQuery. $ (this) .text ()
Nathan Strutz
3
porque? eventualmente $ (this) .html () usará o método nativo
Khodor
Nesse caso, é melhor usar [] em vez do novo Array () - Qual é a diferença
krypru de
2

Você pode fazer o seguinte. uma linha de código será suficiente

  • let array = $('ul>li').toArray().map(item => $(item).html());
  • Obtenha o elemento interessado

    1. obter filhos

    2. obter a matriz do método toArray ()

    3. filtre os resultados que você deseja

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
fonte