jQuery :当列表中的1被删除时，如何自动调整数字列表？

Question

我想要自动调整使用.append()创建的数字列表。例如，如果在列表中添加了4个项目，它们将分别从2-4中编号，如果我删除了第3项，则项目4将自动为第3号，如果我添加了一个新项，它将是列表中的最后一个项。下面是我的代码。

​

$('#display').click(function() {
  $('#show').show();
});
var c = 1;
$('#append').click(function() {
  var cnt = $('.cnt').val();
  for (var i = 0; i < cnt; i++) {
    c++;
    $('#inputs').append("<div id='inputs' name='" + c + "'>" + c + ".)<button id='remove' name='" + c + "'>X</button></div>");
  }
});
$(document).on('click', '#inputs #remove', function() {
  var nm = $(this).attr('name');
  $('div[name="' + nm + '"]').remove();
  c--;
});

#show {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/igorescobar/jQuery-Mask-Plugin/master/src/jquery.mask.js"></script>
<button id='display'>Display</button>
<div id='show'>
  <br>
  <input type='text' class='cnt' value='1' placeholder="num of append" />
  <button id='append'>+</button>
  <br>
  <div id='inputs'>
    1.)
  </div>
</div>

​

这是代码的小提琴。

Answer 1

这是你的答案

小提琴在这里

​

$('#display').click(function() {
  $('#show').show();
});
var c = 1;
$('#append').click(function() {
  var cnt = $('.cnt').val();
  for (var i = 0; i < cnt; i++) {
    c++;
    $('#inputs').append("<div class='inputs' name='" + c + "'><span class='number'>" +c + "</span>.)<button class='remove' name='" + c + "'>X</button></div>");
  }
});
$(document).on('click', '#inputs .remove', function() {
  var nm = $(this).attr('name');
  $('div[name="' + nm + '"]').remove();
  c--;
resetCount();
});
function resetCount(){
    $('#inputs div.inputs').each(function(i){
        $('.number', $(this)).text(i+2);
        $('input', $(this)).attr('name', i+2);
    });
}

#remain,
#total {
  background-color: #333;
  width: 60px;
  height: 20px;
  color: #fff;
  padding: 0 10px;
}
input:focus {
  background-color: #000;
  color: #fff;
}
input {
  background-color: #ccc;
}
#show {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id='display'>Display</button>
<div id='show'>
  <br>
  <input type='text' class='cnt' value='1' placeholder="num of append" />
  <button id='append'>+</button>
  <br>
  <div id='inputs'>
    1.)
  </div>
</div>

​

Answer 2

您不应该对不同的元素使用相同的ID。

另外，您可以通过创建一个函数，在每个添加/删除事件之后重置计数元素。

在jQuery中创建和附加元素时，最好使用以下语法：

$('<ELEMENT TAG/>',{
  ATTRIBUTE: VALUE
});

在jQuery中循环元素时，最好使用$.each

$('#append').on('click', function(){
    $('<div/>', {
        'class': 'inputs',
        html: '<span class="count"></span><input type="text" class="time" name="0" value="00:00:00"/><button>X</button>'
    }).appendTo('#inputs');
    resetInputsCount();
});

$('#inputs').on('click', '.inputs button', function(){
    var $this = $(this);
    $this.parent().remove();
    resetInputsCount();
});

//The function that resets the count span text and the name value based on the current count of elements
function resetInputsCount(){
    //looping through elements
    $('#inputs div.inputs').each(function(i){
        //caching the current element in a var named $this
        var $this = $(this);
        //changing the count span text to i+2 the 2 is added because the index starts at 0 and there is already one element 1.)
        $('.count', this).text((i+2) + '.) ');
        //change the value of the input name
        $('input', $this).attr('name', i+2);
    });
}

基于JSFiddle的演示

Answer 3

我知道已经有答案了，但既然我做了这项工作，我还是把它发出来吧。

下面是这个例子的小提琴

下面是代码：

Html

<div id='button'>
 <span>Add</span>
</div>
<div id='content'></div>

CSS

#button span {
    padding: 5px 15px;
    background: #ccc;
    cursor: pointer;
}
#button {
    margin: 5px 0;
}
.delete {
    cursor: pointer;
    padding: 0 5px;
    border: 1px solid gray;
}

jQuery

$(document).ready(function() {
    var index = 1;
    $('#button').on('click', function() {
        var add = '<div class="new"><span class="number">' + index + '</span><input type="text"/><span class="delete">x</span></div>';
        $('#content').append(add);
        index++;
    });
    $(document).on('click', '.delete', function() {
        index--;
        $(this).parent().remove();
        var index2 = 1;
        var newelement = $('.new');
        $(newelement).each(function() {
            $(this).find('.number').text(index2);
            index2++;
        });
    });

});