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

jquery .each (2nd line) add background color

本文关键字：添加 背景色 2行 each jquery      更新时间：2023-09-26

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

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

现在，我使用jquery为每2行添加了一个背景色：

$("ul li").each(function(index) {
    if (index % 2 == 0) {
        $(this).addClass("second-line");
    }
});

但是，每个列表项都可以被过滤，只查看当前登录的用户。因此，如果我过滤列表，一些行将被隐藏。但过滤列表后，使每2行的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");
        }
    });
});

但没有成功。

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

您应该尝试：odd选择器。使用此项，您可以选择所有奇数项（=第2项、第4项…）。更多信息请点击此处：https://api.jquery.com/odd-selector/

您可以使用css制作它。

类似：

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

希望它能帮助你

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

也许这对你有用

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

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

    });

jquery偶数

相关文章：