如何将子 div 位置编号分配给子 div 内的标签

Question

我在父 div 中有多个子 div，每个 div 都有一个标签，标记看起来像这样。<div id="Parent">    <div id="Child1" onclick="DeleteDiv('#Child1')">        <label> 1<label>    </div>    <div id="Child2" onclick="DeleteDiv('#Child2')">        <label>2<label>    </div>    <div id="Child3" onclick="DeleteDiv('#Child3')">        <label>3<label>    </div>    <div id="Chile4" onclick="DeleteDiv('#Child4')">        <label>4<label>    </div></div>每个子 div 都有删除选项和删除 div 的脚本是function DeleteDiv(divtodelete) {        $(divtodelete).remove();    }现在假设我删除 Child1 我希望标签的其余部分更新为值 1,2,3 而不是保留为 2,3,4。另一种情况是，如果我删除 child2 标签，则应分别使用值 1,2,3 更新，而不是保留为 1,3,4。我该怎么做呢？

Answer 1

首先，你的 HTML 是无效的，因为你有开始label标签而不是结束标签。接下来，不要在 HTML 中进行内联事件处理，而是将其分开并在 JavaScript 中进行。

对于您的问题，只需在删除 div 后循环标签，并使用标签集合中的索引位置更新其文本：

// Set up event handlers on each of the child divs.

// Don't do event handling in HTML, do it in JavaScript

$("#Parent > div").on("click", function(event){

  this.remove();

  updateLabels();

});

function updateLabels(){

  // Loop over each label in the child divs

  $("#Parent > div > label").each(function(index){

    $(this).text(index + 1); // Update the text based on the index

  });

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="Parent">

    <div id="Child1">

        <label>1</label>

    </div>

    <div id="Child2">

        <label>2</label>

    </div>

    <div id="Child3">

        <label>3</label>

    </div>

    <div id="Child4">

        <label>4</label>

    </div>

</div>