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()仅查看直接子项。

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

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

此外，在这种情况下，最好在选择器中提供div标记名称，因此jQuery不会查看 data-custom的每个元素属性。

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

您还可以通过将.container类添加到选择器来使其更加具体。

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

Answer 2

data-custom没有任何<input>

的孩子

您可以改用 -

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

以上代码将在所有儿童，大童等中搜索<input>并替换他们的身份证明。您使用的代码仅在data-custom

的子项中搜索

您的代码相当于 -

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

Answer 3

jQuery的children()仅选择所选元素的子元素;它不会抓住所有后代（即孩子的孩子，他们的孩子等等），这就是你想要的。在你的例子中......

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

...只抓取other_container的子节点，即你的h3和div.container元素。添加“输入”过滤器将根本不选择任何元素。

要查找特定类型的所有后代，请使用jQuery的find()。您的代码可以重写为：

$("[data-custom='other_container']").find('input')

最后，请记住，所有元素ID都必须是唯一的。如果他们不这样做，尝试类似$（'＃this-id-is-not-unique'）的东西会让你大吃一惊。如果需要对每个输入应用相同的标识符，请考虑为每个元素添加一个类。

使用jquery更改多个输入的id

3 个答案: