Question

使用＆＃39; for＆＃39;循环，让我们说我想做4个不同的＆＃39; p＆＃39;身体中的元素有4个不同的ID。我解决了这个问题如下：

for (var i = 1; i <= 4; i++) {
    $("body").append(document.createElement("p"));
    $("p").attr('id', 'paragraph' + i);
}

这对我来说是一个非常愚蠢的错误，这就是为什么：

每次循环递增时，它会创建另一个p元素，这是我想要它做的。但是，它会将所有p元素分配给＆＃39; i＆＃39;的最新值。因此，当执行循环时，所有p元素的值都为4。

我的问题是：有没有办法分配＆＃39; p＆＃39; element的ID为当前值＆＃39; i＆＃39;当＆＃39; p＆＃39;元素被追加？

要明确，这是我的目标：

<p id="paragraph1"></p>
<p id="paragraph2"></p>
<p id="paragraph3"></p>
<p id="paragraph4"></p>

但是在不编辑实际HTML文件的情况下通过jQuery完成。

Answer 1

首先创建元素并设置属性

for (var i = 1; i <= 4; i++) {
    var p= document.createElement("p"); 
    p.setAttribute("id", "paragraph" + i);
    $("body").append(p);
}

Answer 2

不使用document.createElement()，而是使用jQuery：

$("body").append($("<p/>", { id: "paragraph" + i }));

通过传入所需元素的HTML片段来创建带有jQuery的元素时，可以添加一个为新对象提供属性的对象。这可能包括各种各样的东西，包括原生DOM的东西以及jQuery事件处理程序之类的东西。例如，您可以在段落中添加文本：

$("body").append($("<p/>", {
  id: "paragraph" + i,
  text: "Hello I am paragraph number " + i
}));

Answer 3

您可以使用解决方案https://jsfiddle.net/7snh10zz/

for (var i = 1; i <= 4; i++) {
    $("body").append("<p id='paragraph" + i + "'>Paragraph " + i + "</p>");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

另一种方法https://jsfiddle.net/7snh10zz/2/

for (var i = 1; i <= 4; i++) {
   $("body").append(document.createElement("p"));
   $("p:last-child").attr('id', 'paragraph' + i).text("Paragraph " + i);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 4

您的代码意味着，$("p")选择所有已创建的元素并提供ID。在第一次迭代中，你的身体有一个p元素，id为paragraph1。在第二次迭代中，你的身体有两个带有ids paragraph2的p元素。它覆盖第一个<p>标记的id。在第3次迭代中，您的身体有三个p元素，您的代码选择这三个元素，并将paragraph3的id赋予所有标记。通过这种方式，最后一次迭代会导致您的身体有四个p元素，其中包含段落4的ID。您可以使用此代码进行修复。

    function appendText() {
        for (var i = 1; i <= 4; i++) {
            var txt = "<p id='paragraph"+i+"'></p>";
             $("body").append(txt);
        }       
    }

Answer 5

这是选择器问题

$("p:last").attr('id', 'paragraph' + i);

将选择最后的p html标签并为其指定当前的i值

检查此link

jQuery：在元素创建的同时赋予id

5 个答案: