Obtenir un tableau du contenu des éléments de liste dans jQuery

101

J'ai une structure comme celle-ci:

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

Comment utiliser javascript ou jQuery pour obtenir le texte sous forme de tableau?

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

Mon plan après cela est de l'assembler en une chaîne, probablement en utilisant .join(', '), et de l'obtenir dans un format comme celui-ci:

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

javascript jquery Christian Oudard
la source

141

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

... devrait faire l'affaire. Pour obtenir la sortie finale que vous recherchez, join()plus une concaténation fera très bien l'affaire:

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

Shog9
la source

2

JQuery garantit-il un ordre aux éléments renvoyés par la requête? Je suppose que l'ordre renvoyé est le même que l'ordre dans le DOM (c'est-à-dire text1, text2, text3), mais je ne sais pas quoi chercher dans la documentation pour voir si c'est vrai.

styfle

2

Je ne l'ai jamais vu traverser le DOM d'une autre manière que l'ordre de lecture normal. Donc, même si je ne peux pas le prouver, je parierais que la ferme traverse toujours le DOM de haut en bas :)

Flater

$ .Each n'est-il pas considéré comme ayant de mauvaises performances? Si oui, y a-t-il une autre façon de le faire?

Daniel

Combien d'éléments de liste avez-vous que c'est un problème, @Daniel? Oui, il y a d'autres façons de faire la même chose (vous pouvez utiliser $ .map () pour générer le tableau en une seule fois), mais elles reviennent au même.

Shog9

@ Shog9: Je souhaite pousser un dictionnaire vers la liste en prenant les valeurs de deux colonnes différentes de chaque ligne d'une table. N'y a-t-il pas un moyen plus simple de le faire? Merci d'avance.

ln2khanal

71

Sans baies intermédiaires redondantes:

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

Voir la démo de jsfiddle

Alex Nolasco
la source

6

Vous manquez .get()à la fin.

Felix Kling

4

Basé sur la suggestion de Felix Klings: arr = $ ('li'). Map (function () {return $ (this) .text ();}). Get ();

Emil Stenström

1

Je ne comprends pas pourquoi "obtenir la fonction" est nécessaire.

crsuarezf

1

api.jquery.com/map explique pourquoi il y a un .get () nécessaire ("Comme la valeur de retour est un tableau enveloppé de jQuery, il est très courant de get () l'objet retourné pour fonctionner avec un tableau de base.").

Kitto le

3

Le pire, c'est que l'itérateur est faux, vous devez changer l'élément et l'index, pour qu'il dise fonction (i, el).

Kitto

14

Et en javascript propre:

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
la source

14

kimstik était proche, mais pas tout à fait.

Voici comment le faire dans un one-liner pratique:

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

Voici la documentation complète de la fonction map de jQuery, c'est assez pratique: http://api.jquery.com/jQuery.map/

Pour répondre pleinement, voici la fonctionnalité complète que vous recherchiez:

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

Cybolique
la source

Je viens de voir ça ici ( stackoverflow.com/questions/4856283/… ) et

j'allais republier

Mon chemin devrait être un peu plus rapide… ou pas?

kimstik le

1

kimstik, selon Benchmark.js, mon appel de fonction fait 11 252/9 685 ops / sec pour Opera et Chrome respectivement, alors que l'appel de méthode que vous avez posté fait 9 666/9 083 ops / sec sur une liste de 40 éléments. Je pense que la différence vient de la conversion de la liste d'éléments jQuery en Array dans votre exemple, si cela aide. Ils sont très proches, alors choisissez celui qui convient le mieux à votre style de codage :)

Cybolic

6

var arr = new Array();

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

Dave Ward
la source

1

Au lieu de vous fier à innerHTML, vous devez remplacer "this" par un objet jQuery et utiliser la méthode de texte native jQuery. $ (this) .text ()

Nathan Strutz

3

Pourquoi? finalement $ (this) .html () utilisera la méthode native

Khodor

Dans ce cas, il vaut mieux utiliser [] au lieu du nouveau Array () - Quelle est la différence

krypru

2

Vous pouvez faire comme suit. une ligne de code suffira

let array = $('ul>li').toArray().map(item => $(item).html());
Obtenez l'élément intéressé
1. obtenir des enfants
2. obtenir le tableau de la méthode toArray ()
3. filtrer les résultats souhaités

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>

Développer l'extrait

NuOne
la source

Obtenir un tableau du contenu des éléments de liste dans jQuery

Réponses: