查找所有以 id= 开头的 div "string"，遍历结果并更改其 id

Question

我有一个按钮，它可以创建带有编号id的div(div0，div1，div2(。每个div都包含一个删除div的按钮。这些按钮也是数字(delete_div0、delete_dive1、delete_div2(。

在删除例如div0之后，我想重新组织所有内容，使其再次从0开始(在本例中为div1->div0和div2->div 1。

另一个例子：删除div1，div0->div0、div2->div1.

有什么帮助吗？

var counter_div = 0;
$("#add_div").click(() => {
$("#divs").append("<div id='div" + counter_div + "'>Div " + counter_div + " <button id='delete_div" + counter_div + "' type='button'>X</button></div>");
//add listener
$("#delete_div" + counter_div).click((event) => {
nr = event.target.id.substring(
event.target.id.length - 1,
event.target.id.length
);
$("#div" + nr).remove();
})
// this is where I am struggling reorganizing divs
function reorganize() {
$("div[id^=div]").each((element) => {
$(this).prop("id", "div" + element);
});
}
reorganize();
counter_div++;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id='add_div' type='button'>Add div</button></div>
<div id='divs'></div>

编辑：多亏了everbody，我找到了各种解决方案的组合。

$("#delete_div" + counter_div).click((event) => {
//remove div
$(event.currentTarget).parent().remove();
//reorder all ingredients
$("div[id^=div]").each((element) => {
$(this)
.find("div[id^='div']")
.eq(element)
.prop("id", "div" + element);
};
});

可能不是最漂亮的解决方案，但它是有效的。我还不明白的是，为什么每个函数中的$(this(会根据我使用的语法给出不同的结果。

$("div[id^=div]").each(function(element) {console.log($(this))};

与不同

$("div[id^=div]").each((element) => {console.log($(this))};

Answer 1

您可以使用$(event.currentTarget).parent().remove();执行删除。

类似地，如果你想从这样的按钮上选择任何input，点击可以使用$(event.currentTarget).parent().find("input")。

或者你想在divs上循环并找到所有输入，然后你可以使用：

$('#divs > div[id^=div]').each(function(k) {
var allInputs = $(this).find('input');
});

var counter_div = 0;
$("#add_div").click(() => {
$("#divs").append("<div id='div" + counter_div + "'>Div " + counter_div + " <button id='delete_div" + counter_div + "' type='button'>X</button></div>");
//add listener
$("#delete_div" + counter_div).click((event) => {  
$(event.currentTarget).parent().remove();
})
counter_div++;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id='add_div' type='button'>Add div</button></div>
<div id='divs'></div>

Answer 2

在删除时首先调用重组

$("#div" + nr).remove();
reorganize();
})

然后：

var numDivsNum=-1;
//set first id -1
function reorganize() {
[...document.querySelectorAll("#divs > div[id^='div']")].forEach(el => {      
el.id="div"+(++numDivsNum);
// for each element add new id +1
el.innerHTML=el.innerHTML + "New id= " +numDivsNum;
});
}

您的选择器错误，应该是：

div[id^='div']

不是

div[id^=div]

var counter_div = 0;
$("#add_div").click(() => {
$("#divs").append("<div id='div" + counter_div + "'>Div " + counter_div + " <button id='delete_div" + counter_div + "' type='button'>X</button></div>");
//add listener
$("#delete_div" + counter_div).click((event) => {
nr = event.target.id.substring(
event.target.id.length - 1,
event.target.id.length
);
$("#div" + nr).remove();
reorganize();
})
// this is where I am struggling reorganizing divs
var numDivsNum=-1;
function reorganize() {
[...document.querySelectorAll("#divs > div[id^='div']")].forEach(el => {      
el.id="div"+(++numDivsNum);
el.innerHTML=el.innerHTML + "New id is id='div" +numDivsNum+"'";
});
}

counter_div++;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id='add_div' type='button'>Add div</button></div>
<div id='divs'></div>

Answer 3

您可以这样重新索引它们：

$('div[id^="div"]').each(function(k) {
$(this).prop('id', 'div' + k);
});

但就我个人而言，我会给他们所有人一个类，这样你就不必依赖以div选择器开头的，然后考虑使用data-id而不是id。data-id稍后将更容易提取为整数，这似乎是你的目标。也许是这样的？

$('div.my_class').each(function(k) {
$(this).data('id', k);
});

Answer 4

$("#delete_div" + counter_div).click((event) => {
//remove div
$(event.currentTarget).parent().remove();
//reorder all ingredients
$("div[id^=div]").each((element) => {
$(this)
.find("div[id^='div']")
.eq(element)
.prop("id", "div" + element);
};
});

Answer 5

您几乎完成了但是有一些东西需要修复

$(this).parent('div').eq(0).remove();