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

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

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

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

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

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

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

Ответы

Ответ 1

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

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

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

Ответ 2

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

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

См. демонстрационную версию jsfiddle .

Ответ 3

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

Ответ 4

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

Здесь, как это сделать в удобном однострочном пространстве:

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

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

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

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

Ответ 5

var arr = new Array();

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

Ответ 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>