javascript - 为什么 $('#main-content').children('p').html() 在 jQuery 中不起作用

Question

抱歉，我是 jQuery 的初学者和 stackoverflow 的新手，我很难区分这些 DOM 元素。我想更改<p>元素中的innerHTML，但发生了一些奇怪的事情..

例如

html代码：

<div id='main-content'> 
    <p id='p0'>0</p>
    <p>0</p>
</div>

js代码：

var p=$('#main-content').children('p');

$('#p0').html('100');
p[1].html('100');

我想改变第一个和第二个的innerHTML

元素从 0 到 100，但是第二种方法 p[1].html('100') 不起作用……控制台说 TypeError: p[1].html is not a function。请帮助我，Firebug 告诉我 $('#p0') 是 [object object] 而 p[1] 是 [object HTMLParagraphElement]，你能向我解释一下不同之处吗，非常感谢你 TAT

Answer 1

那是因为p[1]，就像 一样p.get(1)，返回 DOM 元素。

使用eq1在 set中的index 处获取 jQuery 对象：

p.eq(1).html('100');

Answer 2

//For First Paragraph with id 'p0';
$('#main-content').find("#p0").html("100");

//For second Paragraph;
$($('#main-content p')[1]).html("100");

Answer 3

jQuery 还支持nth-child选择器。所以你也有这个选择。小提琴

$("#main-content p:nth-child(2)").text("100");

就像 dystroy 所说，访问 jQuery 数组将返回 DOM 元素。您可以使用 eq 之类的帮助程序，或者通过再次包装 DOM 元素来简单地创建另一个 jQuery 对象。因此，例如要修复您的原始代码，只需执行以下操作：

var p=$('#main-content').children('p');
$(p[1]).html('100');

编辑：我重读了这个问题，看来您想更新两个段落元素的内容。在这种情况下，它变得更加简单：

$("#main-content p").text("100");

jQuery 将作用于所有选定的对象。请阅读 jQuery 如何使用css 选择器