使用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.

Answer 1

do not give space after selecting element

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

jsfiddle

Answer 2

尝试使用：odd和：even选择器...

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

Answer 3

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

Answer 4

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');