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

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

javascript jquery

Javascript jQuery：计算div中子元素的数量，在添加/删除元素时更新数量,javascript,jquery,Javascript,Jquery,我正在使用append和counting在div中添加子元素，并在每次添加项时使用++to+1向每个子元素添加一个数字如果删除项目，我希望该值自动调整，例如，如果我有4个元素：要素1 要素2 要素3 要素4 当前，如果删除元素3，列表如下所示：要素1 要素2 要素4 但我希望它看起来像这样：要素1 要素2 要素3 感谢您对我应该如何实现这一目标的建议，谢谢示例代码：您正在为每个remove元素绑定多个事件处理程序 var price_rule_html='Remove Elemen

我正在使用append和counting在div中添加子元素，并在每次添加项时使用++to+1向每个子元素添加一个数字

如果删除项目，我希望该值自动调整，例如，如果我有4个元素：

要素1 要素2 要素3 要素4 当前，如果删除元素3，列表如下所示：

要素1 要素2 要素4 但我希望它看起来像这样：

要素1 要素2 要素3 感谢您对我应该如何实现这一目标的建议，谢谢

示例代码：

您正在为每个remove元素绑定多个事件处理程序

var price_rule_html='Remove Element'； var价格规则计数=1； var price\u rule\u count=jQuery.price\u rule\u area\u 1.children.length； jQuery'.添加价格规则'.单击函数{ 价格规则计数++； jQuery'.price_rule_area_1'。附加'Element'+price_rule_count++price_rule_html+； }; $'div.price\u rule\u area\u 1'。点击'，删除'u price\u rule'，函数{ //动态生成元素的事件处理程序 jQuerythis.parents'.price\u rule\u wrapper' .nextAll'div' //删除div后获取所有div .查找“span” //在里面得到数字跨度 .htmlfunctioni，v{ 返回parseIntv-1； } //它的递减值 .完 //回到拆卸室去除 //删除div 价格规则计数-； //删除元素后将计数减少1 }; 添加元素删除时，将价格\u规则\u计数减少1

删除一个图元后，更改现有图元编号。更新：根据from的回答，我们不需要遍历所有左侧元素，只需要更改那些在删除文本之后的元素

源代码将向注册多个事件。每次添加项目时，删除\u价格\u规则，这意味着如果创建元素3次，当删除元素时，删除处理程序中的逻辑将执行3次，因此如果使用价格\u规则\u计数-，则价格\u规则\u计数将与实际计数不一致，即使我们使用jQuery.price\u rule\u area\u 1.childrence.length；为了得到真实的计数，它的stll是冗余的，可以多次执行相同的逻辑。所以最好在这里使用的委托形式

添加元素您可以在price\u rule\u wrapper元素中更新span元素的内容，如

var price_rule_html='Remove Element'； var价格规则计数=1； var price\u rule\u count=jQuery.price\u rule\u area\u 1.children.length； jQuery'.添加价格规则'.单击函数{ 价格规则计数++； jQuery'.price_rule_area_1'。附加'Element'+price_rule_count++price_rule_html+； }; jQuery'.price\u rule\u area\u 1'。单击'，删除\u price\u rule，函数{ var$wrapper=jQuerythis.closest'.price_rule_wrapper'； $wrapper.nextAll'.price\u rule\u wrapper'.find'span'.textfunctioni，text{ 返回文本-1 } $wrapper.remove；价格规则计数-； };

添加元素查看这把小提琴，我使用CSS计数器来自动保留元素编号：

试试这个伙计

<html>

<body>

<div class="price_rule_area_1"></div>
<button class="button-primary add_price_rule" type="button">Add Element</button>

</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script>
var price_rule_html = '<button class="remove_price_rule button" type="button">Remove Element</button>';
var price_rule_count = 1;



jQuery('.add_price_rule').click(function () {
    var price_rule_count = jQuery(".price_rule_area_1").children().length;    
    price_rule_count++;
    jQuery('.price_rule_area_1').append('<div class="price_rule_wrapper"><div class="price_rule_count">Element #<span class="bull ">' + 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--;
        alert(jQuery('.price_rule_area_1').children().length)
        jQuery('.price_rule_area_1').children().eq(price_rule_count-1).find('.bull').text(price_rule_count)


    });

});
</script>
</html>

谢谢你的回复，但那不行。例如：单击添加元素4次，删除元素2，然后单击添加元素，第四个元素标记为元素2而不是元素4。感谢您的帮助，但这不起作用。如果你添加一些元素，然后删除它们，那么这些数字都是不正确的，并且变成了负值。感谢你的回复，这看起来几乎可以工作了。但是如果你添加5个元素，然后删除3个元素，然后再添加一些元素计数器不能正确标记元素，有什么想法吗？

.price_rule_area_1{
   counter-reset: section; 
}
.price_rule_area_1 .price_rule_wrapper{
    counter-increment: section; 
}
.price_rule_area_1 .price_rule_wrapper .price_rule_count::after{
    content: "#"counter(section);
    display:inline-block;
}

<html>

<body>

<div class="price_rule_area_1"></div>
<button class="button-primary add_price_rule" type="button">Add Element</button>

</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script>
var price_rule_html = '<button class="remove_price_rule button" type="button">Remove Element</button>';
var price_rule_count = 1;



jQuery('.add_price_rule').click(function () {
    var price_rule_count = jQuery(".price_rule_area_1").children().length;    
    price_rule_count++;
    jQuery('.price_rule_area_1').append('<div class="price_rule_wrapper"><div class="price_rule_count">Element #<span class="bull ">' + 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--;
        alert(jQuery('.price_rule_area_1').children().length)
        jQuery('.price_rule_area_1').children().eq(price_rule_count-1).find('.bull').text(price_rule_count)


    });

});
</script>
</html>