jQuery：在创建元素的同时创建一个id

Question

使用'for'循环，假设我想用4个不同的ID在正文中创建4个不同的'p'元素。我走近如下问题：

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

这是我的一个非常愚蠢的错误，继承人为什么：

每次循环的增量，它会创建另一个p元素，这是我希望它做。但是，它将所有p元素分配给最新值'i'。所以当循环执行时，所有p元素的值都是4。

我的问题是：当'p'元素被添加时，是否有办法将'p'元素的ID分配给'i'的当前值？

---

需要明确的是，这是我的目标：

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

但这样做jQuery的通过，而无需编辑实际的HTML文件。

Answer 1

这是选择的问题

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

将选择最后一个P html标签，并给它当前的i值

检查这个link

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

创建元素和属性设置第一

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

Answer 5

你的代码的意思是，$("p")选择所有创建的元素并给出id。 在第一次迭代中，你的身体有一个p元素，id为paragraph1。 在第二次迭代中，您的身体有两个带有id段落的p元素。它覆盖第一个<p>标记的id。 在第三次迭代中，你的身体有三个p元素，你的代码选择这三个元素并给所有标签赋予paragraph3的id。 以这种方式，最后一次迭代会使您的身体拥有4个带有段落4的id的元素。 您可以使用此代码修复。

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