Question

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

例如

html代码：

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

js code：

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

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

我想将第一个和第二个

元素的innerHTML从0更改为100，但第二个方法p [1] .html（'100'）不起作用......控制台说TypeError：p [1] .html不是一个函数。请帮帮我，Firebug告诉我$（'＃p0'）是[对象对象]而p [1]是[对象HTMLParagraphElement]，你可以解释一下我的差异吗，谢谢你这么多TAT

Answer 1

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

使用eq获取集合中索引为1的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选择器。所以你也有这个选择。的 Fiddle

$("#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 selectors

为什么$（'＃main-content'）。children（'p'）。html（）在jQuery中不起作用

3 个答案: