jQuery إضافة خطوط إلى ul

Question

مرحبًا ، أحاول إنشاء وظيفة ستضيف تأثيرًا مخططًا إلى قائمة غير مرتبة ، لقد حصلت على ما يلي حتى الآن ولكن لا يمكنني معرفة كيفية عمل المحدد.

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


    $("list_id").stripe();

Answer 1

كما قال Reko ، فإن أفضل طريقة لتنفيذ ذلك هي استخدام Pseudo Odd و Tow. حاول تنفيذها بنفس ما يلي:

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;
}

لغة البرمجة

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

Answer 2

الكثير من الإجابات المعقدة باستخدام jQuery هنا. كل ما تحتاجه هو جزء صغير من CSS:

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

Answer 3

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

Answer 4

لديك المكالمة The Call the Kids of the UnderededList

لغة البرمجة

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

Answer 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