javascript - Targeting DIVs without #id, Adding #id - Stack Overflow

admin管理员组

文章数量:1327849

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 don't have the 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 have to append one existing DIV with unique #id to each one of the .detail-group DIVs. I have to specify the .detail-group even though they are exactly the same. I don't have access to the HTML to edit it manually.
If I'm correct my best shot is to use JS to set IDs to those .detail-group DIVs.
I used CSS to target each one of them with this and create 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 don't 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 IDs to them?

A side note, I'm working with Enjin modules and thats why I don't have access to their HTML. If someone has experience in this field it will be greatly appreciated.

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 don't have the 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 have to append one existing DIV with unique #id to each one of the .detail-group DIVs. I have to specify the .detail-group even though they are exactly the same. I don't have access to the HTML to edit it manually.
If I'm correct my best shot is to use JS to set IDs to those .detail-group DIVs.
I used CSS to target each one of them with this and create 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 don't 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 IDs to them?

A side note, I'm working with Enjin modules and thats why I don't have access to their HTML. If someone has experience in this field it will be greatly appreciated.

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Aug 24, 2015 at 13:33 Radoslav T.Radoslav T. 7511 silver badge88 bronze badges 5

• 1 Please select if the the given answer worked for you. – Jafar Ali Commented Aug 24, 2015 at 13:38
• The question really is what do you want to do with the divs? add content to them? Then you don't need to add IDs to them. You can select and target the divs in JS as you do in CSS and manipulate each accordingly. However, you must keep your IDs unique. – PeterKA Commented Aug 24, 2015 at 13:40
• Initially i tried to solve the problem on my own and since I know almost nothing abut JS I used the next thing i found usable. – Radoslav T. Commented Aug 24, 2015 at 14:14
• As you may or may not be aware, you can actually use the same rule that you use to target an element in CSS, in javascript.That is to say, document.querySelectorAll(".detail-group:nth-child(1)") will return an array that contains 1 element - the first one on the page. Alternately, document.querySelectorAll(".detail-group") will return an array that contains all 3 of them. Not sure of the jQuery alternative to the native .querySelectorAll function. – enhzflep Commented Aug 24, 2015 at 14:18
• I am aware that there are such ways but my syntax knowledge is limited. Thank you – Radoslav T. Commented Aug 24, 2015 at 14:29

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 11

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

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

Working Demo

You do not need to assign IDs to the divs in order to target them. Let's 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'];

Then you can use the following code to append the div's with above IDs to the respective target DIVs:

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

Alternatively, let's say you're able to select the existing DIVs via a mon class say, .content-div, and divs represents these div's, then you could do it this way:

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

However, if you're adding the same div to all the three target DIVs consider removing the ID before so you don't end up with duplicate IDs:

//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();
});

本文标签： javascriptTargeting DIVs without idAdding idStack Overflow