Obtenga una matriz de contenido de elementos de lista en jQuery

101

Tengo una estructura como esta:

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

¿Cómo uso javascript o jQuery para obtener el texto como una matriz?

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

Mi plan después de esto es ensamblarlo en una cadena, probablemente usando .join(', '), y obtenerlo en un formato como este:

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

javascript jquery

— Christian Oudard
fuente

141

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

... debería hacer el truco. Para obtener el resultado final que está buscando, join()más un poco de concatenación funcionará bien:

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

— Shog9
fuente

2

¿JQuery garantiza un orden a los elementos devueltos por la consulta? Asumiría que el orden devuelto es el mismo que el orden en el DOM (es decir, texto1, texto2, texto3), pero no sé qué buscar en la documentación para ver si esto es cierto.

— styfle

2

Nunca lo he visto atravesar el DOM de otra manera que el orden de lectura normal. Entonces, aunque no puedo probarlo, apostaría la granja a que siempre atraviesa el DOM de arriba a abajo :)

— Flater

¿No se considera que $ .each tiene un mal desempeño? Si es así, ¿hay alguna otra forma de hacerlo?

— Daniel

¿Cuántos elementos de la lista tienes para que esto sea un problema, @Daniel? Sí, hay otras formas de hacer lo mismo (podría usar $ .map () para generar la matriz de una vez), pero equivalen a lo mismo.

— Shog9

@ Shog9: Deseo enviar un diccionario a la lista tomando valores de dos columnas diferentes de cada fila de una tabla. ¿No hay una manera más fácil de hacer eso? Gracias por adelantado.

— ln2khanal

71

Sin matrices intermedias redundantes:

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

Ver demostración de jsfiddle

— Alex Nolasco
fuente

6

Echas de menos .get()al final.

— Felix Kling

4

Basado en la sugerencia de Felix Klings: arr = $ ('li'). Map (function () {return $ (this) .text ();}). Get ();

— Emil Stenström

1

No entiendo por qué es necesario "obtener función".

— crsuarezf

1

api.jquery.com/map explica por qué es necesario un .get () ("Como el valor de retorno es una matriz envuelta en jQuery, es muy común obtener () el objeto devuelto para trabajar con una matriz básica").

— Kitto

3

Lo peor es que el iterador está mal, necesita cambiar el elemento y el índice, para que diga función (i, el).

— Kitto

14

Y en javascript limpio:

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
fuente

14

kimstik estaba cerca, pero no del todo.

A continuación, le indicamos cómo hacerlo en un conveniente resumen:

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

Aquí está la documentación completa para la función de mapa de jQuery, es bastante útil: http://api.jquery.com/jQuery.map/

Solo para responder completamente, aquí está la funcionalidad completa que estaba buscando:

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

— Cybólico
fuente

Acabo de ver esto aquí ( stackoverflow.com/questions/4856283/… ) e iba a volver a publicar, ya que es un gran truco para saberlo

— SeanDowney

Mi camino debería ser un poco más rápido ... ¿o no?

— kimstik

1

kimstik, según Benchmark.js, mi llamada de función hace 11,252 / 9,685 operaciones / seg para Opera y Chrome respectivamente, mientras que la llamada al método que publicaste hace 9,666 / 9,083 operaciones / seg en una lista de 40 elementos. Creo que la diferencia proviene de la conversión de la lista de elementos de jQuery a Array en su ejemplo, si eso ayuda. Están muy cerca, así que elija el que mejor se adapte a su estilo de codificación :)

— Cybolic

6

var arr = new Array();

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

— Dave Ward
fuente

1

En lugar de confiar en innerHTML, debe cambiar "this" a un objeto jQuery y usar el método de texto nativo jQuery. $ (this) .text ()

— Nathan Strutz

3

¿por qué? eventualmente $ (this) .html () usará el método nativo

— Khodor

En este caso, es mejor usar [] en lugar del nuevo Array () - ¿Cuál es la diferencia?

— krypru

2

Puede hacer lo siguiente. una línea de código será suficiente

let array = $('ul>li').toArray().map(item => $(item).html());
Obtener el elemento interesado
1. conseguir niños
2. obtener la matriz del método toArray ()
3. filtra los resultados que deseas

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>

Expandir fragmento

— NuOne
fuente