Question

I’m quite new to javascript and JQuery programming. Usually, to access elements I give them an id, so I can get them like $("#"+id).blabla().

But now I need to dynamically create a div, and access elements inside it.

Something like

<div id="automaticallyGeneratedId">
   <div ???></div> <!-- first div -->
   <div ???></div> <!-- second div -->
</div>

What are the best practices to access and identify each of the inner divs?
I generate another id for them?
Or what?

I don’t have the theory of selectors fully clear.

edit: modified the question from identifying a single inner div to identifying divs amongs many of them

Answer 1

You can maintain a pattern when you’re generating id. For example:

if you always generate id like: myid1, myid2,myid3…

<div id="myid1">
   <div></div>
</div>

<div id="myid2">
   <div></div>
</div>

......

then you can try:

$('div[id^=myid]').find('div').foo();

OR

$('div[id^=myid] div').foo();

Here, ^= is start with selector, so div[id^=myid] will select div whose id start with myid.

You can also use Contain word selector which is ~= and use like $('div[id~=myid]'). This will select div with id contains word myid.

Instead of id if you want to use other attribute eg. name then change selector like:

$('div[name^=myid]') or $('div[name~=myid]').