Получить массив содержимого элемента списка в jQuery

Question

У меня есть такая структура:

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

Как использовать javascript или jQuery для получения текста в виде массива?

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

Мой план после этого состоит в том, чтобы собрать его в строку, возможно, используя .join(', '), и получить его в таком формате:

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

Answer 1

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

... должен сделать свое дело. Чтобы получить конечный результат, который вы ищете, join() плюс некоторая конкатенация будет хорошо работать:

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

Answer 2

Без резервных промежуточных массивов:

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

См. Jsfiddle Демо

Answer 3

Кимстик был близко, но не совсем.

Вот как это сделать в удобном однострочном режиме:

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

Вот полная документация для функции карты jQuery, она очень удобна: http://api.jquery.com/jQuery.map/

Чтобы ответить полностью, вот полная функциональность, которую вы искали:

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

Answer 4

И в чистом 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 5

var arr = new Array();

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

Answer 6

Вы можете сделать следующее. одной строки кода будет достаточно

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

• Получить интересующий элемент

  1. получить детей

  2. получить массив из метода toArray ()

  3. отфильтровать нужные результаты

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>