CODEWITHSUNDEEP
javascriptjqueryhtml
Mike-S122
Mike-S122

Reputation: 219

Javascript Add ID to elements inside a div

I need to set the attribute ID to a group of <div> elements which are within a parent <div>.

The parent <div> has an ID, and some of the child <div> have an ID but others don't.

The HTML code would be:

<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>

After applying Javascript/JQuery it should look:

<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>

I tried the following:

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

But it will give IDs to all <div> without an ID in the whole HTML document. I need to set the IDs only to the child elements of #my_parent_div that do not have one and I would like to set specific IDs (instead of id="div-10", id="div-11", id=div-12)

I appreciate your suggestions

Upvotes: 0

Views: 3600

Answers (2)

Robin Carlo Catacutan
Robin Carlo Catacutan

Reputation: 13679

Your selector is $('div') which will target all div elements on the page. To make it only select div under #my_parent_div use this selector instead : $('#my_parent_div div')

The code will now look like this : 

<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>

Update:

Answering your question on the comment

If you want to have a specific id name for each element I would say you create an array listing all the names.

var ids = ["cat", "dog", "rat", "chicken"];

Then create a variable which will count every time it loops so you can use that to get the name on that array on a certain loop.

So putting it all together, will look like this :

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

Upvotes: 1

David Thomas
David Thomas

Reputation: 253308

I'd suggest the following:

// 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>

External JS Fiddle demo, for experimentation.

References:

Upvotes: 1

Related Questions