jQuery：计算div中子元素的数量，添加/删除元素时更新数量

debugcn 发表于 Dev

Bob子

我正在使用append（）在div内添加子元素，并在每次添加项目时使用++ +1为每个计数/添加一个数字。

我希望该值能够自动调整是否删除了一个项目，例如，如果我有4个元素：

元素＃1
元素2
元素＃3
元素＃4

当前，如果删除了元素＃3，则列表如下所示：

元素＃1
元素2
元素＃4

但我希望它看起来像这样：

元素＃1
元素2
元素＃3

谢谢任何关于我应该用来实现这一目标的建议，谢谢。

示例代码：https : //jsfiddle.net/wepsrzkm/

var price_rule_html = '<button class="remove_price_rule button" type="button">Remove Element</button>';
var price_rule_count = 1;

var price_rule_count = jQuery(".price_rule_area_1").children().length;

jQuery('.add_price_rule').click(function () {

price_rule_count++;
jQuery('.price_rule_area_1').append('<div class="price_rule_wrapper"><div class="price_rule_count">Element #<span>' + price_rule_count + '</span></div>' + price_rule_html + '</div>');

jQuery(".remove_price_rule").click(function() {
    jQuery(this).parents('.price_rule_wrapper').remove();   
});

});

冬玉

price_rule_count删除时减少1。
删除一个元素后，更改现有元素#number。更新：从Arun P Johny的答案来看，我们不需要遍历所有剩余的元素，只需要更改删除了文本后的那些元素即可。
.remove_price_rule每次添加项目时，源代码都会注册多个事件，这意味着如果创建3次元素，则在删除元素时，删除处理程序中的逻辑将执行3次，因此price_rule_count与实际计数不一致如果使用price_rule_count--，即使使用jQuery(".price_rule_area_1").children().length;来获得实数，它的stll也可以重复执行相同的逻辑多次。因此，最好在这里使用.on的代表形式。

var price_rule_html = '<button class="remove_price_rule button" type="button">Remove Element</button>';
var price_rule_count = jQuery(".price_rule_area_1").children().length;

jQuery('.add_price_rule').click(function () {
	    
	price_rule_count++;
	jQuery('.price_rule_area_1').append('<div class="price_rule_wrapper"><div class="price_rule_count">Element #<span>' + price_rule_count + '</span></div>' + price_rule_html + '</div>');
});

+jQuery('.price_rule_area_1').on("click", ".remove_price_rule", function() {
  
  // As from Arun P Johny's answer, we only need to change the text after the removed element.
  $element =  jQuery(this).parents('.price_rule_wrapper');
  $element
       .nextAll('.price_rule_wrapper')
       .find('span')
       .text(function(index, prevText) {
            return parseInt(prevText, 10) - 1;
        });
  
  
  jQuery(this).parents('.price_rule_wrapper').remove();
  --price_rule_count;
   
  // This would be slower as some elements don't need to be traversed.
  // jQuery('.price_rule_wrapper').each(function(idx) {
  //     $(this).find(".price_rule_count > span").text(idx + 1);
  // });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="price_rule_area_1"></div>
<button class="button-primary add_price_rule" type="button">Add Element</button>

jsfiddle

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。