如何将子 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){&nbsp; this.remove();&nbsp; updateLabels();});function updateLabels(){&nbsp; // Loop over each label in the child divs&nbsp; $("#Parent > div > label").each(function(index){&nbsp; &nbsp; $(this).text(index + 1); // Update the text based on the index&nbsp; });}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="Parent">&nbsp; &nbsp; <div id="Child1">&nbsp; &nbsp; &nbsp; &nbsp; <label>1</label>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div id="Child2">&nbsp; &nbsp; &nbsp; &nbsp; <label>2</label>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div id="Child3">&nbsp; &nbsp; &nbsp; &nbsp; <label>3</label>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div id="Child4">&nbsp; &nbsp; &nbsp; &nbsp; <label>4</label>&nbsp; &nbsp; </div></div>