JavaScript - Как получить текст первого дочернего элемента DOM?

Я пытаюсь построить массив фруктов в JavaScript и для этого мне нужно получить текстовые значения всех li детей моего ul элементов. Я добился неплохих успехов, так как мне удалось найти число детей, которые были у моего списка.JavaScript - Как получить текст первого дочернего элемента DOM?

$("#fruits-list > li").length 
=> 6

Я также могу найти элементы по индексу. Здесь я нашел первый элемент, используя этот

$("#fruits-list > li")[0] 
=> <li id="apple">Apple</li>

Я могу получить элемент, но я не могу получить тестовое значение его. Здесь я пытаюсь просто получить текстовое значение apple, и я пробовал практически все. Я попытался

$("#fruits-list > li")[0].text
$("#fruits-list > li")[0].html
$("#fruits-list > li")[0].val

Я получил undefined для всех трех из них. Я также попытался добавить () в конце всех из них, но получил TypeError: Is not a function.

Я не мог найти ответ здесь. Любая помощь приветствуется. Заранее спасибо.

источник

2015-05-15 Richard Hamilton

Как ни странно, есть то, что называется [** первый **] (https://api.jquery.com/first/) – adeneo

Хм, это легко Google-состоянии, вы знаете. '$ (" # fruit-list> li: first-child "). text()' –

сначала не работал бы в этом случае. Поскольку мне нужно создать массив. Я планирую создать цикл, поэтому мне нужно знать, как получить доступ к определенному элементу –

Когда вы используете ноту скобки с индексом в элементе jQuery, вы получаете элемент DOM. Эти объекты нельзя вызвать непосредственно с помощью функций jQuery. Вместо этого используйте eq.

Использование

$("#fruits-list > li").eq(0).text()

Обратите внимание, что если ваша конечная цель заключается в создании массива текстов элементов LI, вы можете просто сделать

var arr = $("#fruits-list > li").map(function(){ return $(this).text() }).get();

источник

2015-05-15 15:57:07

Впечатляющая скорость. Это работает –

text, html и val не являются свойствами DOM, они являются методами jQuery.

Вы можете просто сделать естественный метод JS.

document.querySelector("#fruits-list > li").textContent; //or innerText for legacy IE

querySelector возвращает первый элемент списка элементов. (если вы используете jQuery, однако, я предлагаю ответ dystroy)

источник

2015-05-15 15:58:49

не 'значение' для элемента li. –

Упс! Это мое плохое –

Когда вы обращаетесь к $("#fruits-list > li")[0], вы получаете объект HTMLElement, поэтому вы не можете использовать функцию jQuery. решение dystroy позволит вам использовать jQuery для получения текста, потому что eq возвращает экземпляр jQuery. Вы также можете сделать

$("#fruits-list > li")[0].textContent

источник

2015-05-15 16:00:35 acbabis

Не на IE8: https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#Browser_compatibility –

Прохладный! Это новый JQuery метод HTML/CSS? Я не мог найти его здесь. http://www.w3schools.com/jquery/jquery_ref_html.asp –

@ user4703663 Я предлагаю использовать документацию jQuery через w3schools. Источник лучше, чем отчет в средствах массовой информации;) –

JavaScript - Как получить текст первого дочернего элемента DOM?

ответ

Смежные вопросы