Question

我在html中有一个列表，如下所示：

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

现在，我使用此jquery为每个第二行添加了背景颜色：

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

    if (index % 2 == 0) {

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

    }

});

但是，每个列表项都可以过滤到仅查看当前登录的用户。因此，如果我要过滤列表，则会隐藏一些行。但是在对列表进行过滤后，jQuery使每个第二行混乱。

我该如何做到这一点？

我试过了：

$(".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");

        }

    });

});

但没有成功。

Answer 1

您可以使用$( "ul li:nth-child(2)" ).addClass("second-line");作为第二个元素。

Answer 2

你应该尝试：奇数选择器。使用此选项，您可以选择所有奇数项目（= 2nd，4th，...）。更多信息：https://api.jquery.com/odd-selector/

Answer 3

你可以用css制作它。

像：

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

Answer 4

这可能会对你有用

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



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



    });

jquery even

Answer 5

希望它会帮助你

ul li:nth-child(even) {
  color: red;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

jquery .each（第2行）添加背景颜色

5 个答案: