2015-10-28 1 views
3

Я пытаюсь получить html элементов «li» и предупредить их как строку.Какой объект возвращает селектор jQuery?

HTML:

<ul> 
    <li>lorem ipsum dolor <span>sit</span> amet 1</li> 
    <li>lorem ipsum dolor <span>sit</span> amet 2</li> 
    <li>lorem ipsum dolor <span>sit</span> amet 3</li> 
    <li>lorem ipsum dolor <span>sit</span> amet 4</li> 
    <li>lorem ipsum dolor <span>sit</span> amet 5</li> 
    <li>lorem ipsum dolor <span>sit</span> amet 6</li> 
</ul> 

<p id="greeting">Hello <strong>World</strong>!</p> 

Javascript:

$(document).ready(function(e){ 
    var list = $("li"); 
    var greeting = $("#greeting"); 
    var content =""; 
    for(var i=0, len = list.length; i<len; i++) { 
     content += $(list[i]).html(); 
     //why do I have to use the $ here instead of just doing list[i].html() 

     //content += list[i].html(); why does this not work? 
    } 
    alert(content); 
    alert(greeting.html()); //why does this work without the $ ? 
}); 

Я сделал некоторые исследования и поняли, что JQuery селекторы возвращают DOM элементы, завернутые в объекты JQuery, так что мы можем применить методы JQuery на нем, но почему линия greeting.html() работает нормально без $?

TypeError: список [я] .html не является функцией

почему я получаю эту ошибку, когда я делаю список [я] .html вместо $ (список [я]) HTML().?

Вот fiddle.

+0

приветствие возвращает объект JQuery со всеми его функциями. list также возвращает объект JQuery, но поскольку вы использовали селектор «li», он имеет несколько html DOM. с li [i] вы теперь берете единственный html DOM, без объекта JQuery. Вот почему вам нужно использовать $ (li [i]), чтобы получить функции JQuery. – Danmoreng

ответ

1

Параметры jQuery возвращают набор выбора jQuery («объект jQuery»). Этот объект также является объектом «array like», означающим, что вы можете получить доступ к выбору с помощью индексации индексатора, как в вашем примере.

The элементов в наборе выбора являются элементами DOM и не выбор JQuery себя наборами. Если вы хотите преобразовать элемент DOM в набор выбора jQuery, вам необходимо обернуть его в $(yourElement).

var jQ = $("div"); // get all divs 
jQ[0]; // the first div, a DOMElement 
$(jQ[0]); // a selection containing the first div of the old selection 
jQ.eq(0); // convenience for the above. 

Причина API действует таким образом, для эффективности, если вы выбрали 10000 дивы, создавая 10000 новых объектов является расточительным.

+0

'var jQ = (" div ");' ..? Предполагая, что вы имели в виду '$ (" div ")', 'jQ.eq (0)' возвращает объект jQuery, поэтому не нужно '$ (jQ.eq (0));' –

+0

@TJ Я ответил, увидел "возможно duplicate ", когда пользователь оставил - и закрыл его - уже были ответы, когда я опубликовал. Дубликаты не обращают внимания и все равно удаляются - они снимают его с домашней страницы и заставляют других пользователей не тратить время на это (голосование или ответ). –

+0

А я вижу, ничего страшного тогда –

0

Они хранятся в виде массива HTMLElement, обернутого как только объект jQuery.

Если вы хотите, чтобы получить один элемент, который вы могли бы использовать .eq():

content += list.eq(i).html(); 
0

Войти $("li") и вы поймете.

Это коллекция элементов DOM внутри объекта jQuery, когда вы используете $("li")[i], он получает обратно DOM Elment, который хранится внутри объекта jQuery, вы можете использовать список [i] .innerHTML, чтобы получить html без преобразования обратно к объекту jQuery, так же, как и с обычным элементом Javascript.