Как переназначить идентификатор в jquery

0

Я динамически генерирую элементы через jquery и создавая динамический идентификатор для каждого элемента. Теперь я также предоставил возможность удаления определенного элемента с помощью кнопки удаления. В этом случае мой идентификатор для данного элемента также удаляется. Теперь мне нужно переназначить все идентификаторы, чтобы все идентификаторы были в последовательности.

Например. предположим, что я генерирую 4 divs динамически через jquery

<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>

Теперь я удаляю второй

<div id="box1"></div>
<div id="box3"></div>
<div id="box4"></div>

мой идентификатор теперь в коробке 1, в коробке 3, в ящике 4

но я хочу, чтобы они были box1, box2 и поле 3

  • 5
    Ну почему? Разве вы не можете getElementById('box').children[your_number_here] их в контейнер с именем box а затем просто получить getElementById('box').children[your_number_here] ?
  • 2
    Я согласен с @NiettheDarkAbsol, добавочные атрибуты id или class приводят к кошмару обслуживания, особенно когда они должны быть в порядке.
Показать ещё 3 комментария
Теги:

4 ответа

1

Попробуйте это каждый раз, когда вы удаляете ящик

var $boxes = $('[id^="box"]');
for (var i = 0; i < $boxes.length; i++) {
    $boxes.eq(i).prop('id', 'box' + (i + 1));
}

или оберните ваши ящики с помощью div и сделайте это

$('[id^="box"]').attr('id', function () {
    return "box" + ($(this).index() + 1);
});

DEMO

Поделиться
  • 0
    @ NiettheDarkAbsol ах, добавил .eq ()
  • 1
    Все еще ужасное решение: p
0

Сделайте что-нибудь подобное, получите общий класс для всех divs

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

каждый раз, когда вы удаляете div, и вначале запускаете эту функцию;

var reassignIds = function(){
    $('.box').each(function(index){
        $(this).attr('id', 'box'+(index+1));
    });
}

вот jsfiddle http://jsfiddle.net/ravikumaranantha/bjBSs/1/

Поделиться
  • 0
    $(this).attr('id', 'string') - это анти-паттерн jQuery
  • 0
    Ну, вопрос задан, и то, что здесь делается, выглядит для меня анти-паттерном, я просто отвечал на вопрос, поскольку у меня не было достаточно хорошей информации, чтобы предложить лучший вариант.
Показать ещё 1 комментарий
0

захватить идентификатор удаленного объекта

например, если вы #btn элемент на некотором нажатии кнопки с идентификатором say #btn тогда:

$('#btn').click(function(e)

{
 var elemid=($('#box2').attr('id')).split(""); //elemid will be ["b","o","x","2"]

 var id=new Array(); //var id type is array because in case removed item id contains more than one digit number like box22, box31, box49..

 for(var i=0; i<elemid.length;i++)

 {
   if(!isNaN(parseInt(elemid[i])))
   {
     id.push(elemid[i]); //extract all numbers and push them into id array
   }
 }

  id=parseInt(id.join("")); //join id array contents and change them from string to number

 var parent=$('#box2').parent();

 var pos=$(#box2).index();  //position from where to start changing id(s)

 $('#box2').remove();

 var k=0;

 parent.children('div').each(function(){

    if(k>=pos){
        $(this).attr('id','box'+id)

         id++;
    }
    k++;
  })
})
Поделиться
0

Если необходимо использовать последовательные идентификаторы, наиболее лаконичная реализация этого (предполагая, что каждый ящик имеет общий класс box):

$('.box').each(function(i) {
    this.id = 'box' + (i + 1);
});

альтернативная реализация будет заключаться в следующем:

$('.box').attr('id', function(i) {
    return 'box' + (i + 1);
});

но это не так эффективно, как в конечном итоге создает дополнительные объекты jQuery в цикле, которые .attr.

Однако было бы лучше не использовать последовательные идентификаторы вообще - обычно вы можете использовать .index() чтобы найти положение дочернего элемента в своем родителе всякий раз, когда вам нужно.

Поделиться
  • 0
    на самом деле мне нужны последовательные идентификаторы для внутренних целей.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню