Динамічно створювати divs з збільшеним id за допомогою jquery

У мене є текст Я хочу додати кілька divs, але ідентифікатор потрібно змінити динамічно. наприклад:

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

Будь-яка допомога? Дякую..

4
можливий дубльований: stackoverflow.com/questions/347798/ …
додано Автор Rene Pot, джерело
Що саме ви пробували? Ви можете просто використовувати .attr ('id', 'myID');
додано Автор JohnP, джерело

4 Відповіді

Ви можете змінити це за допомогою .attr() :

$('#first').attr('id', 'first6')
11
додано

Ваше сюжети та зміст питань, здається, не співпадають один з одним. Я припускаю, що ви хочете створити div, де кожен ідентифікатор послідовно збільшується кожного разу, коли він створюється?

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$(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>
Add DIV
<div id="parent"></div>
</div> </div>
9
додано
Я те, що шукав. Шахта трохи складніше, але це буде гарним початком
додано Автор Syfer, джерело
дуже дякую ........... це працює для мене
додано Автор Arslan Ahmad, джерело

спробуйте змінити код на:

<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 " not id = first )

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

2
додано

Якщо вас цікавило, як працює стиль "

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$(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>
</div> </div>
0
додано