jQuery/Javascript adding number id to two elements with a for-loop

Question

I'm using Bootstrap to create tabs when a link in a treeview is clicked. Within each tab that opens on a click there are two other tabs called Query Builder and Dimension Builder. Below is the markup that's created on the go with jQuery (just part of it):

<div class="tab-pane active" id="1" role"tabpanel">
    <ul class="nav nav-tabs query-dimension-tabs" role="tablist">
        <li role="presentation" class="active">
            <a role="tab" data-toggle="tab" href="#tab0" aria-controls="tab0">Query Builder</a>
        </li>
        <li role="presentation">
            <a role="tab" data-toggle="tab" href="#tab1" aria-controls="tab1">Dimension Builder</a>
        </li>
    </ul>
    <div class="tab-content"></div>
</div>
<div class="tab-pane" id="2" role"tabpanel">
    <ul class="nav nav-tabs query-dimension-tabs" role="tablist">
        <li role="presentation" class="active">
            <a role="tab" data-toggle="tab" href="#tab1" aria-controls="tab1">Query Builder</a>
        </li>
        <li role="presentation">
            <a role="tab" data-toggle="tab" href="#tab2" aria-controls="tab2">Dimension Builder</a>
        </li>
    </ul>
    <div class="tab-content"></div>
</div>

To be able to have my forms, one for Query Builder and one for Dimension Builder, within these tabs and keep each form unique from the other in each tab within each tab-pane all of those <a> tags need to have unique href and aria-controls attributes, that is the number on the end has to be unique. So the first <a> tag needs to be number 0, next number 1, 2, 3, 4.... and so on.

I'm using a for-loop to loop through all <ul> that exist and I'm trying to set the number for two <a> tags in each <ul>. Below is the for-loop:

    var contentUl = firstContentDiv.find(".query-dimension-tabs");      

    for (var i = 0; i < contentUl.length; i++) {      
        var qId = i;
        var dId = i + 1;        

        qA.href = "#tab" + qId;
        qA.setAttribute("aria-controls", "tab" + qId);
        dA.href = "#tab" + dId;
        dA.setAttribute("aria-controls", "tab" + dId);
    }

I've tried many different calculations but I always end up with 0 1 1 2 2 3, but I would like to have it 0 1 2 3 4 5....to how ever many tabs that have these two tabs are.

Is this possible with some calculations?

Here is a photo of the tabs when two links have been clicked:

Did you try look at where second value came from? possible with breakpoint — Elvin Mammadov
– Elvin Mammadov, Commented Jul 29, 2016 at 9:34
Tried i=i+2 instead of i++ in the for-loop and just ended up with tab0 tab1 tab0 tab1 and then tab2 tab3 tab2 tab3 tab4 tab5 tab4 tab5...maybe it's not possible to have it tab0 tab1 tab2 tab3. It would be easy if it was just one element that needed unique number in the for-loop. — Margret Kristjansdottir
– Margret Kristjansdottir, Commented Jul 29, 2016 at 9:44
Elvin what second value. If I just calculate these id's with i in any way that I have tried I always end up with 0 1, 1 2, 2 3, 3 4 or 1 2, 2 3, 3 4. — Margret Kristjansdottir
– Margret Kristjansdottir, Commented Jul 29, 2016 at 9:45
Hey @MargretKristjansdottir, if you get your problem right, then do you want your pair of qId & dId to be 0 1, 2 3, 4 5, 6 7 and so on??? If yes, then the solution is a simple one. — Ankush Raghuvanshi
– Ankush Raghuvanshi, Commented Jul 29, 2016 at 10:02

polamoros · Accepted Answer · 2016-07-29 10:16:50Z

2

This should work for you.

var qId = 0;
$(".query-dimension-tabs a").each(function(){
    $(this).attr("href","#tab"+qId);
    $(this).attr("aria-controls","tab"+qId);
    ++qId;
});

edited Jul 29, 2016 at 10:16

answered Jul 29, 2016 at 10:01

polamoros

2591 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Margret Kristjansdottir Over a year ago

This is exactly the same solution that I have, except pure jQuery which is of course I should use instead of mix and match of jQuery and Javascript. This will give you tab0 tab1, tab1 tab2, tab2 tab3...

Margret Kristjansdottir Over a year ago

Yes that's it thank you :D ...when --qId is removed it works as expected :)

Ankush Raghuvanshi · Accepted Answer · 2016-07-29 10:11:57Z

0

What you really need to do is that instead of incrementing the value of variable i in the for loop by just one, you need to increment it by two.

So instead of this

for (var i = 0; i < contentUl.length; i++)

Do this

for (var i = 0; i < contentUl.length; i+=2)

This way, every time your loop starts, qId will get value get the value of i (0, 2, 4, 6 and so on) and dId wil get the value 1 greater than i (1, 3, 5, 7 and so on). So you'll get values of qId, dId pair as 0 1, 2 3, 4 5, and so on.

So your final for loop will look like this:

for (var i = 0; i < contentUl.length; i+= 2) {      
    var qId = i;
    var dId = i + 1;        

    qA.href = "#tab" + qId;
    qA.setAttribute("aria-controls", "tab" + qId);
    dA.href = "#tab" + dId;
    dA.setAttribute("aria-controls", "tab" + dId);
}

Also if you need to change the values of all the elements with the same class or ID, then you will have to use the each() function instead of the for loop and use $(this).attr() to change the values for them as stated by polamoros.

answered Jul 29, 2016 at 10:11

Ankush Raghuvanshi

1,44212 silver badges18 bronze badges

4 Comments

Margret Kristjansdottir Over a year ago

You forgot to change the for-loop it's the same as mine :)

Ankush Raghuvanshi Over a year ago

i realised the same as soon as I posted the answer and hence corrected it immediately. Check the solution now. :)

Margret Kristjansdottir Over a year ago

But this doesn't work I end up with 0 1, 0 1, 2 3, 2 3, 4 5, 4 5...it almost works but there are two same in a row.

Ankush Raghuvanshi Over a year ago

You were getting two same in a row as when you don't use the each() function, then it doesn't loops over the elements with same selector property you are selecting them from (be it Class, ID or just the element type like 'a' or 'li'). It simply does it for the same. Hence I told you in my answer that you need to use the each() function and the $(this).attr() to loop over DOM elements as stated by polamoros.

Collectives™ on Stack Overflow

jQuery/Javascript adding number id to two elements with a for-loop

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related