Question

我正在尝试使用jQuery动态地将类添加到每个第二行，如下所示

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

以下是jquery

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

这不会添加课程。任何帮助将不胜感激。我希望每一个文章元素都有＆＃34; last＆＃34;追加。

Answer 1

在选择元素

后不给空格

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

jsfiddle

Answer 2

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

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

Answer 3

article节点本身不是子节点，因此选择器不起作用。从父项开始（其子项为<article>个节点）：

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

jsFiddle Demo

Answer 4

你忘记了第一行的双引号，也没有在选择器之前添加空格（：nth-child）

下面的CodePen链接

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

使用jquery动态添加类

4 个答案: