Javascript 将 ID 添加到 div 内的元素

Question

我需要将属性ID设置为一组<div>父元素 <div> 内的元素.

家长<div>有身份证，有的 child <div>有 ID，但其他人没有。

HTML 代码为:

<div id="my_parent_div">
   <div id="my_child_div_a">Here is some text A</div>
   <div>Here is some text B</div>
   <div>Here is some text C</div>
   <div>Here is some text D</div>
</div>

应用 Javascript/JQuery 后，它应该看起来:

<div id="my_parent_div">
   <div id="my_child_div_a">Here is some text A</div>
   <div id="new_added_id_b">Here is some text B</div>
   <div id="new_added_id_c">Here is some text C</div>
   <div id="new_added_id_d">Here is some text D</div>
</div>

我尝试了以下方法:

<script type="text/javascript">
$('div').each(function(eq, el) {
    el = $(el);
    if(typeof(el.attr('id')) === "undefined") {
        el.attr('id', 'div-' + eq);
    }
});
</script>

但它会给所有 <div> 提供 ID整个 HTML 文档中没有 ID。我只需将 ID 设置为 #my_parent_div 的子元素没有 ID，我想设置特定 ID(而不是 id="div-10", id="div-11", id=div-12)

感谢您的建议

Answer 1

您的选择器是 $('div') ，它将定位页面上的所有 div 元素。要使其仅选择 #my_parent_div 下的 div，请改用此选择器:$('#my_parent_div div')

代码现在看起来像这样:

<script type="text/javascript">
$('#my_parent_div div').each(function(eq, el) {
    el = $(el);
    if(typeof(el.attr('id')) === "undefined") {
        el.attr('id', 'div-' + eq);
    }
});
</script>

更新:

在评论中回答您的问题

如果您想为每个元素指定一个特定的 ID 名称，我会说您创建一个列出所有名称的数组。

var ids = ["猫", "狗", "鼠", "鸡"];

然后创建一个变量，该变量将在每次循环时进行计数，以便您可以使用它来获取特定循环中该数组的名称。

所以把它们放在一起，看起来像这样:

var count = 0;
$('#my_parent_div div').each(function(eq, el) {
    var ids = ["cat", "dog", "rat", "chicken"];
    el = $(el);
    if(typeof(el.attr('id')) === "undefined") {
        el.attr('id', ids[count]);
        count++;
    }
});