CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jeroen Bellemans
Jeroen Bellemans

Reputation: 2035

jquery .each (2nd line) add background color

I have a list showing in html like this:

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>...</li>
</ul>

Now, I added for each 2nd line a background color using this jquery:

$("ul li").each(function(index) {

    if (index % 2 == 0) {

        $(this).addClass("second-line");

    }

});

BUT, each list item can be filtered to just view for the user currently logged in. So some lines will be hidden if I would filter the list. But after filtering the list, the jQuery to make each 2nd line is messed up.

How can I make that work?

I tried this:

$(".button").click(function() {

    $("ul li").each(function(index) {

        var uid = $(this).attr("data-uid");
        var tuid = $(this).attr("data-tuid");

        if (uid != tuid) {

            $(this).hide(500);

        }

    });

    $("ul li").each(function(index) {

        if (index % 2 != 0) {

            $(this).removeClass("second-line");

        }

    });

});

But no success.

Upvotes: 0

Views: 180

Answers (5)

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24454

may this will work for you 

 $("ul li:even").each(function(index) {



            $(this).removeClass("second-line");



    });

jquery even

Upvotes: 0

Mukul Kant
Mukul Kant

Reputation: 7122

Hope it will helps you

ul li:nth-child(even) {
  color: red;
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

Upvotes: 0

cs.matyi
cs.matyi

Reputation: 1264

you can make it with css.

like:

ul:nth-child(even){
    background-color: #00ffff;
}

Upvotes: 0

Programmer1994
Programmer1994

Reputation: 975

You should try the :odd selector. With this one, you can select all the odd items (= 2nd, 4th,...). More info here: https://api.jquery.com/odd-selector/

Upvotes: 0

sachin.ph
sachin.ph

Reputation: 1078

you can use $( "ul li:nth-child(2)" ).addClass("second-line"); for the second elemnt.

Upvotes: 0

Related Questions