Geek Answers Handbook

Orientation DIV without #id, adding #id

I'm new to JavaScript and CSS, and my skills are poor at best. I have an idea how to solve my problem, but I have no knowledge to solve it.
I have a code like this:

<div class="detail"> <div class="detail-group"></div> <div class="detail-group"></div> <div class="detail-group"></div> </div>

I need to add one existing DIV with a unique #id for each of the .detail DIV groups. I have to specify the .detail group, even if they are exactly the same. I do not have access to HTML to edit it manually.
If I am right, my best shot is to use JS to set the identifiers of these .detail-group div groups.
I used CSS to target each of them with this and made a difference:

 .detail-group:nth-child(1) { padding-right: 0.01px } .detail-group:nth-child(2) { padding-right: 0.02px } .detail-group:nth-child(3) { padding-right: 0.03px }

But I do not know how to detect this difference with JS and work with it. Is it possible to differentiate the order of elements in JS? If there is, how to do it. And how to add an ID to them?

Note, I work with Enjin modules and therefore I do not have access to their HTML. If anyone has experience in this area, we will be very grateful.

+6
source share
2 answers

You can use the .attr() function along with your callback to set identifiers using the index of div elements:

 $('.detail-group').attr('id', function(i) { return 'detailgroup'+(i+1); });

Working demo

+11
source

You do not need to assign identifiers to divs to customize them. Say the following variable shows - 'index of target div = index of element in array', 'ID of existing ID to append'

 var ids = ['divid1','divid2','divid3'];

You can then use the following code to add a div with the identifiers above to the corresponding target DIVs:

 $('.detail-group').append(function(i) { return $('#' + ids[i]); //or return $('#divid' + (i+1)); });

Alternatively, suppose you can select existing DIVs through a common class, say .content-div and divs represents these divs , then you can do it like this:

 var divs = $('.content-div'); $('.detail-group').append(function(i) { return divs[i]; });

However, if you add the same div to all three target DIVs, consider removing the identifier before you get duplicate identifiers:

 //select the one DIV var oneDiv = $('#oneDiv'); //detach it from DOM oneDiv.detach(); //remove ID oneDiv.removeAttr('id'); //clone oneDiv and add to the target DIVs $('.detail-group').append(function() { return oneDiv.clone(); });
0
source

More articles:


All Articles