使用jquery动态创建具有递增id的div

发布于 2024-12-12 20:16:55 字数 352 浏览 1 评论 0原文

我有一条文字我想附加多个 div，但 id 应该动态更改。例如：

<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>

有什么帮助吗？谢谢..

原文

I have a text
I want to append multiple divs but the id should be changed dynamically.
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>

Any help? thanks..

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

此岸叶落 2024-12-19 20:16:55

你的标题和问题内容似乎不一致。我假设您想要创建 div，其中每个 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>

Your title and question content seem to disagree with each other. I am assuming you are wanting to create div's where each id sequentially increments each time one is created?

$(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>

回复收藏 0 原文

娇纵 2024-12-19 20:16:55

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

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

You can change it with .attr():

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

回复收藏 0 原文

倥絔 2024-12-19 20:16:55

尝试将代码更改为：

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

try to change the code to :

<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>

dont forget the id inside " " (id="first" not id=first)

now you can simply use jquery : $("#first").attr('id','first6');

回复收藏 0 原文

绿阴红影里的.如风往事 2024-12-19 20:16:55

如果您对造型的工作原理感兴趣。`

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

#first4 {
  background: blue;
}

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

If you were interested in how styling works.`

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

#first4 {
  background: blue;
}

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

回复收藏 0 原文

优雅的叶子 2024-12-19 20:16:55

使用 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>';
 }

Create a div with id=Container and the create 5 divs dynamically using following code

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

回复收藏 0 原文

~没有更多了~