Отримайте масив вмісту елементів списку в 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? Так, є й інші способи зробити те ж саме (ви можете використовувати $ .map (), щоб генерувати масив за один раз), але вони складають те саме.

— Shog9

@ Shog9: Я хочу піднести словник до списку, який містить значення з двох різних стовпців з кожного рядка таблиці. Чи не існує простішого способу зробити це? Заздалегідь спасибі.

— ln2khanal

71

Без зайвих проміжних масивів:

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

Дивіться демонстрацію jsfiddle

— Алекс Ноласко
джерело

6

Ви сумуєте .get()в кінці.

— Фелікс Клінг

4

На основі пропозиції Фелікса Клінга: arr = $ ('li'). Map (function () {return $ (this) .text ();}). Get ();

— Еміль Стенстрем

1

Я не розумію, чому "отримати функцію" необхідно.

— crsuarezf

1

api.jquery.com/map пояснює, чому потрібен .get () ("Оскільки повернене значення є масивом, оберненим jQuery, дуже часто (() повертається об'єкт працює з базовим масивом.").

— Кітто

3

Гірше те, що ітератор помиляється, вам потрібно переключити елемент та індекс, щоб він написав функцію (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);

— ренінг
джерело

14

kimstik був поруч, але не зовсім.

Ось як це зробити у зручному одноколірному:

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

Ось повна документація щодо функції карти jQuery, це дуже зручно: http://api.jquery.com/jQuery.map/

Просто щоб відповісти повністю, ось повний функціонал, який ви шукали:

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

— Кіболічний
джерело

Я щойно побачив це тут ( stackoverflow.com/questions/4856283/… ) і збирався репостувати, оскільки це чудовий трюк, щоб знати

— SeanDowney

Мій шлях повинен бути трохи швидшим .. чи ні?

— kimstik

1

kimstik, згідно з Benchmark.js, мій виклик функції складає 11,252 / 9,685 ops / sec відповідно для Opera та Chrome, тоді як виклик методу, який ви опублікували, складає 9,666 / 9,083 ops / sec у списку з 40 елементів. Я думаю, що різниця полягає в перетворенні зі списку елементів jQuery в масив у вашому прикладі, якщо це допомагає. Вони дуже близькі, тому виберіть те, що краще відповідає вашому стилю кодування :)

— Cybolic

6

var arr = new Array();

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

— Дейв Уорд
джерело

1

Замість того, щоб покладатися на innerHTML, слід змінити "це" на об'єкт jQuery і використовувати метод нативного тексту jQuery. $ (this) .text ()

— Nathan Strutz

3

чому? Врешті-решт $ (this) .html () скористається нативним методом

— Ходор

У цьому випадку краще використовувати [] замість нового 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
джерело