Question

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

父<div>有一个ID，有些孩子<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>

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

感谢您的建议

Answer 1

您的选择器为$('div')，它将定位页面上的所有div元素。要仅在div下选择#my_parent_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 = ["cat", "dog", "rat", "chicken"];

然后创建一个变量，该变量将在每次循环时计数，以便您可以使用该变量在某个循环上获取该数组的名称。

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

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++;
    }
});

Answer 2

我建议如下：

// select the relevant element(s),
// set the 'id' property of those elements using prop():
$('#my_parent_div div').prop('id', function (i,v) {
// the first argument ('i') is the index of the current
// element from amongst the collection,
// the second ('v') is the current value of the property
// we're accessing:

    // if the current id is an empty string (v === '') or
    // it's undefined ('undefined === typeof v)
    // we set the id to the string 'new_added_id_' plus
    // the String created from the character-code of 97 ('a')
    // plus the element's index in the collection. Otherwise,
    // if the id is set we return the existing id:
    return v === '' || 'undefined' === typeof v ? 'new_added_id_' + String.fromCharCode(97 + i) : v;
});

$('#my_parent_div div').prop('id', function(i, v) {
  return v === '' || 'undefined' === typeof v ? 'new_added_id_' + String.fromCharCode(97 + i) : v;
});

div {
  width: 80%;
  margin: 0 auto 0.5em auto;
  border: 2px solid #000;
}
div > div[id]::before {
  content: 'ID: ' attr(id);
  color: #f00;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

外部JS Fiddle demo，用于实验。

参考文献：

JavaScript的：
- String.fromCharCode()。
- typeof。
jQuery的：
- prop()。

Javascript将ID添加到div

2 个答案: