jquery - 使用 jquery 改变多个输入的 id

Question

我正在尝试更改父容器内所有复选框的 ID，但到目前为止我还不能让它工作，这是我的代码，

HTML:

<div data-custom='other_container' class='container'>
<h3>Other:</h3>
<div class='container'>
  <label for='monitoring'>Monitoring and verification of energy savings: </label>
  <div>
    <input type='checkbox' name='other' id='monitoring' class='validate[minCheckbox[1]] checkbox' />
  </div>
</div>
<div class='container'>
  <label for='engineering'>Engineering & project management: </label>
  <div>
    <input type='checkbox' name='other' id='engineering' class='validate[minCheckbox[1]] checkbox' />
  </div>
</div>
<div class='container'>
  <label for='energy_audits'>Energy audits: </label>
  <div>
    <input type='checkbox' name='other' id='energy_audits' class='validate[minCheckbox[1]] checkbox' />
  </div>
</div>
</div>

jQuery:

$("[data-custom='other_container']").children('input').attr('id', 'test');

知道这可能有什么问题吗？

提前致谢。

Answer 1

data-custom='other_container'元素没有任何 <input> 的子元素。

你应该use .find() instead .

$("[data-custom='other_container']").find('input').attr('id', 'test');

.find()方法将搜索所有后代，whereas .children() 只看直接的 child 。

但请记住，ID 必须是唯一的，因此您需要确保为每个 ID 分配一个唯一的 ID。你可以这样做:

$("[data-custom='other_container']").find('input').attr('id', function( i ) {
       return 'test' + i;
});

另外，给 div 是个好主意在这种情况下，选择器中的标记名称，因此 jQuery 不会查看 data-custom 的 every 元素。属性。

$("div[data-custom='other_container']")

您还可以通过添加 .container 使其更具体一些选择器的类。

$("div.container[data-custom='other_container']")