[英]Find all div's beginning with id="string", iterate through result and change their id's
I have a button which creates div's with numbered id's (div0, div1, div2).我有一个按钮,它创建带有编号 id(div0、div1、div2)的 div。 Each div contains a button to delete the div.
每个 div 都包含一个用于删除 div 的按钮。 The buttons are also numberes (delete_div0, delete_div1, delete_div2).
按钮也是数字(delete_div0、delete_div1、delete_div2)。
After delete eg div0, I want to reorganize everything so it starts from 0 again (in this case div1 -> div0 and div2 -> div1.删除例如 div0 后,我想重新组织所有内容,以便再次从 0 开始(在这种情况下,div1 -> div0 和 div2 -> div1。
Another example: Delete div1, div0 -> div0, div2 -> div1.另一个例子:删除div1, div0 -> div0, div2 -> div1。
Any help?有什么帮助吗?
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>
EDIT: Thanks to everbody, I found a mix out of every solution.编辑:感谢大家,我找到了每种解决方案的混合体。
$("#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);
};
});
Probalby not the most beautiful solution, but it works. Probalby 不是最漂亮的解决方案,但它有效。 What I did not understand yet is why $(this) in the each-function gives different results depending on which syntax I use.
我还不明白的是为什么每个函数中的 $(this) 会根据我使用的语法给出不同的结果。
$("div[id^=div]").each(function(element) {console.log($(this))};
is different to不同于
$("div[id^=div]").each((element) => {console.log($(this))};
You can perform delete with $(event.currentTarget).parent().remove();
您可以使用
$(event.currentTarget).parent().remove();
执行删除操作. .
Similarly if you want to select any input
from on such button click you can use $(event.currentTarget).parent().find("input")
.同样,如果您想从此类按钮单击中选择任何
input
,您可以使用$(event.currentTarget).parent().find("input")
。
Or you want to loop over divs
and find all inputs then you can use :或者您想遍历
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>
First call your reorganize on remove首先在删除时调用您的重组
$("#div" + nr).remove();
reorganize();
})
then:然后:
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;
});
}
And your selector was wrong, it should be:而你的选择器错了,应该是:
div[id^='div']
not不是
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>
You can re-index them like this:您可以像这样重新索引它们:
$('div[id^="div"]').each(function(k) {
$(this).prop('id', 'div' + k);
});
But personally I'd give them all a class so you don't have to rely on the begins with div
selector, and then consider using data-id
instead of id.但就我个人而言,我会给他们一个类,这样你就不必依赖以
div
开始的选择器,然后考虑使用data-id
而不是 id。 data-id
will be easier to extract as an integer later and that appears to be your goal. data-id
稍后将更容易提取为整数,这似乎是您的目标。 Maybe something like this?也许是这样的?
$('div.my_class').each(function(k) {
$(this).data('id', k);
});
$("#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).parent('div').eq(0).remove();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.