jquery：在div中查找并遍历具有特定ID的所有跨度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6002004/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery: Find and loop through all spans with certain ID within a div?
提问by Billy
I have a list that is numbered for each item (1,2,3,4..). I have a function that removes items but when it removes an item the list numbers are not in order anymore (1,3,4...).
我有一个为每个项目编号的列表（1,2,3,4..）。我有一个删除项目的功能，但是当它删除一个项目时，列表编号不再按顺序排列（1,3,4 ...）。
What I am trying to do is find all spans starting with "id_" and get the full ID so can can reset the numbers to the correct order.
我想要做的是找到所有以“id_”开头的跨度并获取完整的ID，以便可以将数字重置为正确的顺序。
$('[id^="table_"]').each(function(index, table){
});
The way I am trying to do it I cannot figure out how to get the ID of the span.
我尝试这样做的方式我无法弄清楚如何获取跨度的 ID。
<div id="list">
<div id="list_1">
<table border="0" width="100%" id="table_1">
<tbody>
<tr>
<td>
<span id="id_1">1</span>
</td>
</tr>
</tbody>
</table>
</div>
<div id="list_2">
<table border="0" width="100%" id="table_2">
<tbody>
<tr>
<td>
<span id="id_2">2</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Thanks
谢谢
UPDATED
更新
Ok I have taken a bits from each post to get this
好的，我从每个帖子中获取了一些内容来获取此信息
var i = 1;
$('span[id^="id_"]', "#list").each(function(index){
var id = this.id;
$('#'+id).html(i+'. ');
i++;
});
Thanks all for you help.
谢谢大家的帮助。
回答by T.J. Crowder
UpdateI missed that you already had an eachloop. It looks fine except you seem to be looking for ids starting with "table_", but you don't have any (you have "list_" and "id_"). Also, you're doing it completely unbounded, which will probably be quite a lot of work. The more narrow the selector can be, the better (usually).
更新我错过了你已经有一个each循环。它看起来不错，除非您似乎正在寻找id以“table_”开头的s，但您没有任何（您有“list_”和“id_”）。此外，您正在完全无限制地进行操作，这可能需要大量工作。选择器越窄越好（通常）。
The way I am trying to do it I cannot figure out how to get the ID of the span.
我尝试这样做的方式我无法弄清楚如何获取跨度的 ID。
Within an eachloop, the idof the DOM element is available as this.id.
在each循环中，idDOM 元素的 可用作this.id。
My original answer addresses how to do this with the markup you quoted.
我的原始答案解决了如何使用您引用的标记执行此操作。
Original answer:
原答案：
jQuery has the "attribute starts with" selector, so you can find all the children that are spans with an idstarting with "id_" and then loop through assigning new IDs to them:
jQuery的有选择“带属性开始”，这样你就可以找出所有的孩子spans的一个id以“ID_”，然后通过对它们分配新的ID循环开始：
$("#list").find('span[id^="id_"]').each(function(index) {
this.id = "id_" + (index + 1);
});
That uses findto find them, then eachto loop through them. I assumed there you wanted to start the numbering with 1 rather than with 0, hence adding one to the indexthat jQuery passes into each. Assigning the IDs can be done with the raw DOM element (thisin theeach` callback) as there's nothing complicated about it.
这用于find查找它们，然后each循环遍历它们。我假设你想从 1 而不是 0 开始编号，因此在indexjQuery 传递给each. Assigning the IDs can be done with the raw DOM element (这个in theeach` 回调的那个中添加一个），因为它没有什么复杂的。
Although actually, you don't need a separate call to find, you can just use a descendant selector:
虽然实际上，您不需要单独调用find，您可以只使用后代选择器：
$('#list span[id^="id_"]').each(function(index) {
this.id = "id_" + (index + 1);
});
Further update: If you really want to have fun, you can renumber the lists, the tables within the lists, and the spans within the tables:
进一步更新：如果你真的想玩得开心，你可以对列表、列表中的表格和表格中的跨度重新编号：
$('#list div[id^="list_"]').each(function(listIndex) {
// This is called for each list, we renumber them...
++listIndex; // So it's 1-based
this.id = "list_" + listIndex;
// ...then process the tables within them
$(this).find('table[id^="table_"]').each(function(tblIndex) {
// Called for each table in the list, we renumber them...
++tblIndex; // 1-based
this.id = "table_" + listIndex + "_" + tblIndex;
// ...then process the spans
$(this).find('span[id^="id_"]').each(function(spanIndex) {
// Called for each span in the table
++spanIndex; // 1-based
this.id = "id_" + listIndex + "_" + tblIndex + "_" + spanIndex;
});
});
});
回答by jerone
You can use the attributeStartsWith selector.
您可以使用attributeStartsWith 选择器。
$('span[id^="id_"]', "#list").each(function(i){ ... });
回答by Joshua - Pendo
You could use
你可以用
$('[id^="table_"]').each(function(index, table){
$('span:first', this).attr('id');
});
Basically this looks for the FIRST span element inside each table. If there would be more spans, you would have to combine both:
基本上，这会在每个表中查找第一个 span 元素。如果有更多跨度，则必须将两者结合起来：
$('[id^="table_"]').each(function(index, table){
$('span[id^="id_"]:first', this).attr('id');
});
Not 100% sure if the last one works.
不是 100% 确定最后一个是否有效。
回答by Gabriele Petrioli
If you are trying to change the ids of each groups list, table and spanthen you will need to
如果您尝试更改每个组列表、表和跨度的 ID，则您需要
// for each list
$('[id^="list_"]').each(function(index, table){
// for the inner table and span and the actual list
$('table[id^="table_"], span[id^="id_"]', this).add(this).each(function(){
// split the id to the prefix and number
var id_parts = this.id.split('_');
// assign new id based on existing prefix and the new number
this.id = id_parts[0] + '_' + (index+1);
})
});
if you want to change the text as well then use
如果您也想更改文本，请使用
// for each list
$('[id^="list_"]').each(function(index, table){
// for the inner table and span and the actual list
$('table[id^="table_"], span[id^="id_"]', this).add(this).each(function(){
// split the id to the prefix and number
var id_parts = this.id.split('_');
// assign new id based on existing prefix and the new number
this.id = id_parts[0] + '_' + (index+1);
// single out the span and change its text
}).filter('span').text(index+1);
});
回答by aroth
If a framework-agnostic solution is acceptable, something along the following lines should do the trick:
如果框架不可知的解决方案是可以接受的，那么以下几行应该可以解决问题：
var myDiv = document.getElementById("targetDivId");
var displayNum = 1;
var nodes = myDiv.getElementsByTagName("span");
for (var index = 0; index < nodes.length; index++) {
var node = nodes[index];
if (node.id.indexOf("id_") == 0) {
node.id = "id_" + displayNum;
node.innerHTML = displayNum;
displayNum++;
}
}
