javascript - 如何将子 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 标记，而不是结束标记。接下来，don't do event handing inline in 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>