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

我在父 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。


我该怎么做呢?


米脂
浏览 140回答 1
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>
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript