如何遍历所有 <p> 元素？ [复制]答案

【问题标题】：How can I loop through all <p> elements? [duplicate]如何遍历所有 <p> 元素？ [复制]
【发布时间】：2015-02-14 03:24:22
【问题描述】：

我想遍历文档中的所有段落元素并调整它们的 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() 循环的某种语法错误，有人可以纠正我，任何帮助将不胜感激。

【问题讨论】：

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

标签： javascript jquery html loops each

【解决方案1】：

你的代码应该是：

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

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

LIVE DEMO

【讨论】：

没错，我忘记了:)
我对此进行了更正，但它仍然只输出“遍历段落元素”，就好像没有段落元素一样。不过谢谢。
你可以使用this.id
@jctwood 您需要将代码放入就绪处理程序中...
@Bhojendra - C-Link尼泊尔谢谢你解决了这个问题！

【解决方案2】：

你应该使用

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

id 是 Element 实例的属性，例如 this。如果将其包装到 jQuery 元素中，它将不再具有 id 属性，因此您必须使用像 $(this).prop('id') 这样的 jQuery 方法来获取它。不过，这是不必要的。

【讨论】：

我对此进行了更正，但它仍然只输出“遍历段落元素”，就好像没有段落元素一样。不过谢谢。
@jctwood 它对我有用：jsfiddle.net/aokj1fjp
不要忘记将您的代码放入准备好的处理程序中。 JSFiddle 省略了这一点，因为它会自动为您完成。

【解决方案3】：

您是否收到错误：未捕获的 ReferenceError：$ 未定义？如果是这种情况，请加载 JQuery 库。将此添加到您的 html 文档的头部。

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

【讨论】：

不，我正确地包含了 jquery。

【解决方案4】：

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

如果它仍然没有遍历标签，那么它可能在 DOM 有机会完成加载之前运行。将代码放在就绪处理程序中会延迟执行，直到 DOM 完全加载：

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

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

【讨论】：

我对此进行了更正，但它仍然只输出“遍历段落元素”，就好像没有段落元素一样。不过谢谢。
@jctwood 您的代码是否在准备好的处理程序中？它可能在 DOM 完全加载之前执行，这意味着 <p> 标记甚至还没有呈现。