Question

我有一个文字我想追加多个div，但id应该动态更改。 e.g：

<div id=first>text</div>
<div id=first0>text</div>
<div id=first1>text</div>
<div id=first2>text</div>
<div id=first3>text</div>
<div id=first4>text</div>
<div id=first5>text</div>

有任何帮助吗？感谢..

Answer 1

您的标题和问题内容似乎彼此不同意。我假设你想要创建div，每次创建一个id时每个id都会递增？

$(function(){
  var count = 0;
  $('#append').click(function(){
    $('#parent').append('<div id="first'+count+'">text</div>');
    count++;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="append">Add DIV</a>
<div id="parent"></div>

Answer 2

您可以使用.attr()更改它：

$('#first').attr('id', 'first6')

Answer 3

尝试将代码更改为：

<div id="first">text</div>
<div id="first0">text</div>
<div id="first1">text</div>
<div id="first2">text</div>
<div id="first3">text</div>
<div id="first4">text</div>
<div id="first5">text</div>

不要忘记id里面“{id="first"而不是id=first）

现在你可以简单地使用jquery：$("#first").attr('id','first6');

Answer 4

如果您对造型的工作方式感兴趣。

＆＃13;

$(function(){
  for (let i = 0 ;i < 10; i ++){  
      $('#foo').append('<div id="first'+i+'">text</div>');
  }
});

＆＃13;

#first4 {
  background: blue;
}

＆＃13;

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

＆＃13;

Answer 5

使用id = Container创建一个div并使用以下代码动态创建5个div

//using JavaScript
 for(var i=0;i<5;i++){
     var obj = document.getElementById("container");
     obj.innerHTML += '<div id="first'+i+'"></div>';
 }

使用jquery动态创建id增加的div

5 个答案: