jquery向ul添加条纹答案

【问题标题】：jquery adding stripes to uljquery向ul添加条纹
【发布时间】：2015-07-21 20:57:06
【问题描述】：

您好，我正在尝试创建一个将条纹效果添加到无序列表的函数，到目前为止，我有以下内容，但无法弄清楚选择器应该如何工作。

    (function($) {
    $.fn.stripe = function(){
        this.$("li:even").css("background-color","#f00");
    };
    })(jQuery);


    $("list_id").stripe();

【问题讨论】：

标签： jquery list css-selectors

【解决方案1】：

这里有很多使用 jQuery 的复杂答案。您只需要一点 CSS：

ul > li:nth-of-type(odd) {
    background-color: #f9f9f9 ;
}

【讨论】：

请记住，这个问题是在 2009 年发布的，比 :nth-of-type 这样的 CSS3 选择器早了两年。
公平点，我刚刚注意到也有最近的答案。尽管如此，希望如果有人像我刚才那样从谷歌登陆这里，他们现在至少会有一个很好的答案。

【解决方案2】：

正如 reko 所说，实现这一点的最佳方法是使用伪奇偶数。尝试像下面一样实现它：

JQuery

$(document).ready(function() {
    $("ul.formattedList li:odd").addClass("oddItem");
    $("ul.formattedList li:even").addClass("evenItem");
}

CSS

.formattedList .oddItem {
    background-color: Black;
    color: White;
}

.formattedList .evenItem {
    background-color: White;
    color: Black;
}

HTML

<ul class="formattedList">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

【讨论】：

【解决方案3】：

$(this).children('li:even').css("background-color","#f00");

【讨论】：

还有：$("list_id").stripe();应该是：$("#list_id").stripe();

【解决方案4】：

你可以调用 unorderedlist 的子级

HTML

<ul>
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ul>

jQuery

>

(function($) {
$.fn.stripe = function(){
  $(this).children("li:even").css("background-color","#ccc");
};

$('ul').stripe();
})(jQuery);

【讨论】：

【解决方案5】：

我认为最好的方法是使用nth-child CSS3 属性比如：

.black-one {
 background: black;
}

<script type="text/javascript">
 $("#list1 li:nth-child(2n+2)").addClass("black-one");
</script>

演示： http://codepen.io/anon/pen/doWyKg

【讨论】：