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>

這裏是代碼的jsfiddle。

Answer 1

這裏是你的答案

Fiddle Here

$('#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); 
    }); 
} 

Demo on JSFiddle

Answer 3

我知道那裏有已經是一個答案，但因爲我做的工作，我還不如將它張貼。

Here's the fiddle for the example

下面的代碼：

的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++; 
     }); 
    }); 

}); 

Answer 4

使用你的HTML結構，增加一些輸入字段（以確保我們維持值）

這裏是我的方法： （也修復了重複的ID和你的名字）

$('#display').click(function() { 
 
    $('#show').show(); 
 
}); 
 
var c = 1; 
 
var inputs = []; 
 

 

 
$('#append').click(function() { 
 
    var cnt = $('.cnt').val(); 
 
    for (var i=0; i<cnt; i++) { 
 
    c++; 
 
    $div = $("<div id='input"+c+"' />").data('index', c); 
 
    $span = $("<span />").text(c+".)"); 
 
    $button = $("<button class='input_remove' />").text("X"); 
 
    $input = $("<input type='text' class='small' />").attr("name","input"+c); 
 
    $div.append($div).append($span).append($input).append($button); 
 
    $('#inputs').append($div); 
 
    } 
 
}); 
 

 

 
$(document).on('click', '.input_remove', function() { 
 
    index = $(this).parent().data('index'); 
 
    $("#inputs").find('#input'+index).remove(); 
 
    c = 1; 
 
    $("#inputs").find('div').each(function(index,ele){ 
 
    c++; 
 
    $(ele).attr('id',"input"+c).data('index',c) 
 
      .find("span").text(c+".)").end() 
 
      .find("input").attr("name","input"+c); 
 
    }); 
 
});

#show { 
 
    display: none; 
 
} 
 
.small { width:100px; }

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