Add class dynamically using jquery

Question

I am trying to add the class last dynamically to every second row with jQuery as below

 <div class= "news-row">
    <article class="news-container fixed-page">  blah blah</article>
    <article class="news-container fixed-page">  blah blah2</article>
    </div>

Below is the jquery

 <script type="text/javascript">
    $(document).ready(function () {
        $('article.news-container :nth-child(2n)').addClass('last');
    });
</script>

This does not add the class. Any help will be appreciated. I want the every second article element to have "last" appended.

Have you tried debugging the selector? You have an $ object for article.news-container :nth-child(2n). Check what does it resolve to using console.log. — Gajus
– Gajus, Commented Aug 8, 2014 at 20:14

Ashok Shah · Accepted Answer · 2014-08-08 20:16:39Z

3

do not give space after selecting element

$(document).ready(function () {
    $('article.news-container:nth-child(2n)').addClass('last');
});

jsfiddle

answered Aug 8, 2014 at 20:16

Ashok Shah

95614 silver badges41 bronze badges

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

1 Comment

Diin Over a year ago

thanks for fixing my code your solution is the closest to my original attempt and so will give you the tick

Basic · Accepted Answer · 2014-08-08 20:15:08Z

1

Try using the :odd and :even selector...

$('article.news-container:even').addClass('last');

answered Aug 8, 2014 at 20:15

Basic

26.8k29 gold badges122 silver badges209 bronze badges

5 Comments

Diin Over a year ago

thanks your solution works as well as @Ashoks recommendation using the nth and odd selector which is faster?

Colin DeClue Over a year ago

nth-child is much faster. But it really shouldn't be much of a concern. Use whichever one makes the most sense to you.

Basic Over a year ago

@ColinDeClue Can you provide a reference / tests? I tend to use the most explicit operator simply for maintainability but if there's a clear performance benefit, 2n is passably self-explanatory.

Basic Over a year ago

@Diin No worries... Pick whichever suits you best, that's what this site is all about! Anyway, glad to help and see you around.

Colin DeClue Over a year ago

@Basic: I put a link in my first comment. It's much faster, but you should know there's no reason to worry about speed in this case. I assume you're not going to be doing this a lot of times in a loop, and the speed difference is so small for a single usage that it'd be impossible to notice.

Cᴏʀʏ · Accepted Answer · 2014-08-08 20:15:52Z

1

An article node isn't a child of itself, so that selector won't work. Start with the parent instead (whose children are the <article> nodes):

$('.news-row :nth-child(2n)').addClass('last');

jsFiddle Demo

answered Aug 8, 2014 at 20:15

Cᴏʀʏ

108k20 gold badges169 silver badges201 bronze badges

1 Comment

Diin Over a year ago

there are two other elements inheriting the parent Thanks

kkirsche · Accepted Answer · 2014-08-08 20:24:38Z

0

You are forgetting a double quote on the first line, also do not add space before selector (:nth-child)

CodePen link below

http://codepen.io/kkirsche/pen/Hkutd

HTML:

 <div class="news-row">
     <article class="news-container fixed-page">  blah blah</article>
     <article class="news-container fixed-page">  blah blah2</article>
</div>

CSS:

.last {
    color: red;
}

JS:

$('article.news-container:nth-child(2n)').addClass('last');

answered Aug 8, 2014 at 20:24

kkirsche

1,2572 gold badges18 silver badges39 bronze badges

Collectives™ on Stack Overflow

Add class dynamically using jquery

4 Answers 4

1 Comment

5 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related