Question

我正在尝试获取“li”元素的html并将其作为字符串提醒。

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选择器返回包装在jQuery对象中的DOM元素，以便我们可以在其上应用jQuery方法，但为什么没有$？行greeting.html（）工作正常？

TypeError：list [i] .html不是函数

当我列出[i] .html而不是$（list [i]）时，为什么会出现此错误.html（）？

这是fiddle。

Answer 1

jQuery选择返回一个jQuery选择集（“jQuery对象”）。该对象也是一个“数组类似”对象，这意味着您可以通过索引器表示法访问选择，如示例所示。

选择集中的元素是 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个div，则创建10000个新对象是浪费。

Answer 2

它们存储为HTMLElement数组包装为单个 jQuery对象。

如果您希望获得一个元素，可以使用.eq()：

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

Answer 3

记录$("li")，您就会明白。

它是jQuery对象中的DOM Elements的集合，当你使用$("li")[i]它获得存储在jQuery对象中的DOM Elment时，你可以使用list [i] .innerHTML来获取html无需转换回jQuery对象，就像使用普通的Javascript选择元素一样。

jQuery选择器返回什么样的对象？

3 个答案: