0

Всем привет. Помогите, плиз с такой задачей: Есть код типа:

<div class='parent'>
     <div id='1' class='child'></div>
     <div id='2' class='child'></div>
     <div id='3' class='child'></div>
     <div id='4' class='child'></div>
     <div id='5' class='child'></div>
</div>

<div class='add-new'></div>

Так вот, мне нужно, чтобы при удалении и при добавлении id их автоматически менялись. То есть, если удалил элемент--id остальных за ним идущих уменьшались на 1, а если добавил, то добавляемому элементу присваивался id на 1 больше, чем у самого последнего.

Спасибо всем, кто поможет =)

1
  • А для чего вам это надо? Не лучше ли в данном случае адресоваться к дочерним элементам через childNodes?
    – sercxjo
    18 июн 2012 в 9:54

3 ответа 3

0
var app = {
    model : {
        '0':"zero",
        '1':"one",
        '2':"two"
    },

    count: 3,

    $view: $('.parent'),

    tmpl: '<div class="child"/>',

    render : function(){
        this.$view.html('');
        for(var i=this.count; i--;)
        {
            var child = $(this.tmpl);
            this.$view.prepend(child.attr('id',i).text(this.model[i]))
        }
    },
    add: function(data){
        this.model[this.count++] = data;
        this.render();
        return this;      
    },

    remove: function(id){            
        for(var i=id; i<this.count; i++)
        {
            this.model[i]=this.model[i+1];
        }
        delete this.model[--this.count];
        this.render();
        return this;    
    }
};

Результат:

app.render();

<div class="parent">
  <div class="child" id="0">zero</div>
  <div class="child" id="1">one</div>
  <div class="child" id="2">two</div>
</div>

app.add("three");

<div class="parent">
  <div class="child" id="0">zero</div>
  <div class="child" id="1">one</div>
  <div class="child" id="2">two</div>
  <div class="child" id="3">three</div>
</div>

app.remove(2);

<div class="parent">
  <div class="child" id="0">zero</div>
  <div class="child" id="1">one</div>
  <div class="child" id="2">three</div>
</div>

решение неоптимальное и даже возможно содержит баги, поэтому вся дальнейшая оптимизация в ваших руках

0
$('.child').each(function(i){
    $(this).attr('id', i);
});
0

как вариант

2
  • i можно не объявлять $('.child').each(function(i){ $(this).attr('id', i/*i+1*/); });
    – Spectre
    18 июн 2012 в 9:28
  • да Вы правы... заработался )
    – oneboy
    18 июн 2012 в 9:29

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.