如何循环遍历所有的 <p> 元素？

Question

如何循环遍历所有的 <p> 元素？

3

我希望能够通过循环遍历文档中的所有段落元素并调整它们的HTML。目前我使用一些jQuery代码：

console.log("loop through <p> elements");    

$("p").each(function()
{
    console.log("next <p> element with id: " + this.id);
});

然而，仅在控制台显示“遍历段落元素”，而我的正文中有几个具有唯一id的段落元素。

<body>
    <p id="para1"> paragraph 1 </p>
    <p id="para2"> paragraph 2 </p>     
    <p id="para3"> paragraph 3 </p> 
</body>

我希望这是 .each() 循环中的某种语法错误，并希望有人可以纠正我，非常感谢您的帮助。

- jctwood

$.each($("p"),function(){console.log("下一个带有id的<p>元素: " + $(this).attr('id'));}); - Reza-S4

4个回答

2

你应该使用

$("p").each(function() {
    console.log("next <p> element with id: " + this.id);
});

id 是 Element 实例的一个属性，就像 this 一样。如果您将其包装成 jQuery 元素，则不再具有 id 属性，因此您将需要使用 jQuery 方法（例如 $(this).prop('id')）来获取它。但这是不必要的。

- Oriol

我将其更正为这个，但它仍然只输出“遍历段落元素”，好像没有段落元素一样。谢谢。 - jctwood

@jctwood，这对我有效：http://jsfiddle.net/aokj1fjp/ - Oriol

不要忘记将您的代码放在就绪处理程序中。JSFiddle会自动为您省略此步骤。 - Rory McCrossan

0

jQuery对象没有id属性。要获取元素的ID，请使用$(this).attr('id')。

如果仍然无法循环遍历标签，则可能是因为它在DOM有机会完成加载之前就运行了。将代码放置在ready处理程序中将延迟执行，直到DOM完全加载：

$(document).ready(function() {
    console.log("loop through <p> elements");    

    $("p").each(function()
    {
        console.log("next <p> element with id: " + $(this).attr('id'));
    });
});

- ElGavilan

我已经更正了代码，但它仍然只输出“loop through paragraph elements”，好像没有段落元素一样。不过还是谢谢你。 - jctwood

1

@jctwood 你的代码是否在 ready 处理程序内？这可能是因为 DOM 尚未完全加载，意味着 <p> 标签甚至还没有被渲染。 - ElGavilan

0

你是否遇到了错误：Uncaught ReferenceError: $ is not defined? 如果是这样，请加载 JQuery 库。将其添加到 HTML 文档的头部即可。

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

- Gijs Mater

1

不，我已经正确地包含了jQuery。 - jctwood

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Wilfredo P · Accepted Answer

您的代码应该是：

$("p").each(function()
{
    console.log("next <p> element with id: " + $(this).attr('id'));
});

因为$(this).id不存在，或者this.id也是有效的。

在线演示