Question

我想遍历文档中的所有段落元素并调整它们的html。目前我使用了一些jquery：

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

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

然而，只有＆＃34;循环通过段落元素＆＃34;出现在控制台中，我的身体中有一些带有唯一ID的段落元素：

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

我希望它与.each（）循环有某种语法错误，有人可以纠正我，任何帮助都会非常感激。

Answer 1

你的代码应该是：

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

由于$(this).id不存在，或this.id也有效。

LIVE DEMO

Answer 2

你应该使用

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

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

Answer 3

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'));
    });
});

Answer 4

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

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

如何遍历所有<p>元素？</p>

4 个答案: