CODEWITHSUNDEEP
jquery
Bert Murphy
Bert Murphy

Reputation: 37

JQuery - Adding staggered classes to elements

I hope the title makes sense.

In short I have 5 different elements each of which is to have a different class added to it. These 5 elements will then be repeated in a series however many times needed. So in practice it will look something like this:

<div class="manager red"></div>
<div class="manager blue"></div>
<div class="manager green"></div>
<div class="manager orange"></div>
<div class="manager pink"></div>

<div class="manager red"></div>
<div class="manager blue"></div>
<div class="manager green"></div>
<div class="manager orange"></div>
<div class="manager pink"></div>

etc...

I've been trying to use nth-child and first-of-type but without much success.

$('.page-about-us .manager:nth-child(5n+1)').addClass('red');
$('.page-about-us .manager:nth-child(5n+2)').addClass('blue');
$('.page-about-us .manager:nth-child(5n+3)').addClass('green');
$('.page-about-us .manager:nth-child(5n+4)').addClass('orange');
$('.page-about-us .manager:nth-child(5n+5)').addClass('pink');

I don't think this is close so any pointers appreciated.

Thanks

Upvotes: 1

Views: 581

Answers (3)

Ted
Ted

Reputation: 14927

How bout this...

var classes = ['red','blue','green','orange','pink'];
$('.page-about-us .manager').each(function(index, element){
    $(element).addClass(classes[index])
});

or if the block of five repeats inside '.page-about-us'

var classes = ['red','blue','green','orange','pink'];
$('.page-about-us .manager').each(function(index, element){
    $(element).addClass(classes[index%classes.length])
});

Like in a structure such as this:

<div class="page-about-us">
    <div class="manager"></div>
    <div class="manager"></div>
    <div class="manager"></div>
    <div class="manager"></div>
    <div class="manager"></div>

    <div class="manager"></div>
    <div class="manager"></div>
    <div class="manager"></div>
    <div class="manager"></div>
    <div class="manager"></div>
</div>

Upvotes: 1

wirey00
wirey00

Reputation: 33661

In your selector you are looking for elements with class='manager' inside of elements with class='page-about-us'

Your div's don't have a class='manager' so it's not selecting any elements

So depending on your structure and what you want to do

<div class='page-about-us'>
    <div class='manager'>test</div>
    <div class='manager'>test</div>
    <div class='manager'>test</div>
    <div class='manager'>test</div>
    <div class='manager'>test</div>
    <div class='manager'>test</div>
    <div class='manager'>test</div>
    <div class='manager'>test</div>
    <div class='manager'>test</div>
    <div class='manager'>test</div>    
</div>

would work with your current jQuery selectors

$('.page-about-us .manager:nth-child(5n+1)').addClass('red');
$('.page-about-us .manager:nth-child(5n+2)').addClass('blue');
$('.page-about-us .manager:nth-child(5n+3)').addClass('green');
$('.page-about-us .manager:nth-child(5n+4)').addClass('orange');
$('.page-about-us .manager:nth-child(5n+5)').addClass('pink');

FIDDLE

if want to filter child elements of .manager then you will need to change the selector

<div class='page-about-us'>
    <div class='manager'>
        <div></div> <!-- trying to target these children div -->
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>        
</div>

Then you would want to select the children divs

$('.page-about-us .manager > div:nth-child(5n+1)')

FIDDLE

Upvotes: 0

Akhilesh Sharma
Akhilesh Sharma

Reputation: 1628

Here is a small example that I created. Here is the HTML code for reference: 

<button id="add_divs">Add Divs</button>
<div class="div_container">
</div>

Here is the jQueryCode that you can use to execute the logic:

var div_container = $(".div_container");
$("#add_divs").on("click", function(e){
    for(i=0;i<5;i++)
    {
        div_container.append("<div>Test"+i+"</div>");
    }
    console.log($(".div_container div:nth-child(2)").text());
    $(".div_container div:nth-child(5n+1)").addClass("red");
    $(".div_container div:nth-child(5n+2)").addClass("blue");
    $(".div_container div:nth-child(5n+3)").addClass("green");
    $(".div_container div:nth-child(5n+4)").addClass("orange");
    $(".div_container div:nth-child(5n+5)").addClass("pink");
});

You can run the code and accordingly check on the JS Fiddle

Upvotes: 0

Related Questions