Altering multiple input's id's using jquery

Question

Hi guys, I am trying to change the id's of all of the check boxes inside of a parent container, but thus far I have ot been able to get it to work, here is my code,

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');

Any idea on what could be wrong with this?

Thanx in advance.

Answer 1

The data-custom='other_container' element doesn't have any children that are <input> elements.

You should use .find() instead.

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

The .find() method will search through all descendants, whereas .children() only looks at immediate children.

But keep in mind that IDs must be unique, so you will want to be sure to assign a unique ID to each. You could do something like this:

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

Also, it is a good idea to give the div tag name in the selector in this case, so jQuery isn't looking at every element for the data-custom attribute.

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

You could also make it a little more specific by adding the .container class to the selector.

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

Answer 2

data-custom don't have any children that are <input>

You can use this instead -

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

The above code will search <input> in all childrens , grand-childrens and so on and replace their id. The code you have used searches only in children of data-custom

Your code is equivalent to -

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

Answer 3

jQuery's children() only selects children of the selected element; it doesn't grab all descendants (i.e. children of children, their children, and so on), which is what you want. In your example...

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

...only grabs the children of the other_container, i.e. your h3 and the div.container elements. Adding the 'input' filter will select no elements at all.

To find all descendants of a particular type, use jQuery's find(). Your code could be rewritten as:

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

Lastly, keep in mind that all element IDs need to be unique. If they aren't, trying something like $('#this-id-is-not-unique') will frustrate you considerably. If you need to apply the same identifier to each of these inputs, consider adding a class to each element.