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

101

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

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

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

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

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

'"text1", "text2", "text3"'
javascript jquery Кристиан Удар
источник

Ответы:

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

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

var quotedCSV = '"' + optionTexts.join('", "') + '"';
Shog9
источник
2
Гарантирует ли jQuery порядок элементов, возвращаемых запросом? Я бы предположил, что возвращаемый порядок совпадает с порядком в DOM (т.е. text1, text2, text3), но я не знаю, что искать в документации, чтобы убедиться, что это правда.
Styfle
2
Я никогда не видел, чтобы он пересекал DOM каким-либо иным образом в обычном порядке чтения. Так что, хотя я не могу это доказать, я готов поспорить с фермой, что она всегда пересекает DOM сверху вниз :)
Flater
Разве $ .each не считается плохой производительностью? Если да, есть ли другой способ сделать это?
Daniel
@Daniel, сколько у вас пунктов списка, что это проблема? Да, есть и другие способы сделать то же самое (вы можете использовать $ .map () для генерации массива за один раз), но они равны одному и тому же.
Shog9
@ Shog9: Я хочу поместить словарь в список, принимающий значения из двух разных столбцов из каждой строки таблицы. Нет ли более простого способа сделать это? Заранее спасибо.
ln2khanal 06
71

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

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

См. Демонстрацию jsfiddle

Alex Nolasco
источник
6
Вы пропустите .get()в конце.
Феликс Клинг
4
На основе предложения Феликса Клингса: arr = $ ('li'). Map (function () {return $ (this) .text ();}). Get ();
Эмиль Стенстрём,
1
Я не понимаю, зачем нужна "функция получения".
crsuarezf
1
api.jquery.com/map объясняет, почему необходим .get () («Поскольку возвращаемое значение представляет собой массив, завернутый в jQuery, очень часто get () возвращаемый объект работает с базовым массивом»).
Китто
3
Хуже всего то, что итератор неправильный, вам нужно переключить элемент и индекс, чтобы он говорил function (i, el).
Китто
14

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

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

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

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

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

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

$.map( $('li'), function (element) { return $(element).text() }).join(', ');
Киболический
источник
Я только что видел это здесь ( stackoverflow.com/questions/4856283/… ) и собирался сделать репост, потому что это отличный трюк, чтобы знать,
Шон Дауни,
Мой путь должен быть немного быстрее .. или нет?
kimstik
1
kimstik, согласно Benchmark.js, мой вызов функции выполняет 11 252/9 685 операций в секунду для Opera и Chrome соответственно, тогда как вызов метода, который вы опубликовали, выполняет 9 666/9 083 операций в секунду для списка из 40 элементов. Я думаю, что разница связана с преобразованием списка элементов jQuery в массив в вашем примере, если это поможет. Они очень близки, так что выберите тот, который больше подходит вашему стилю программирования :)
Cybolic
6 
var arr = new Array();

$('li').each(function() { 
  arr.push(this.innerHTML); 
})
Дэйв Уорд
источник
1
Вместо того, чтобы полагаться на innerHTML, вы должны изменить «this» на объект jQuery и использовать собственный текстовый метод jQuery. $ (this) .text ()
Натан Струтц
3
Зачем? в конечном итоге $ (this) .html () будет использовать собственный метод
Khodor
В этом случае лучше использовать [] вместо new Array () - В чем разница
krypru
2

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

  • 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>
Развернуть фрагмент

NuOne
источник