ulにストライプを追加するjquery
-
06-07-2019 - |
質問
こんにちは、順序付けられていないリストに縞模様の効果を追加する関数を作成しようとしていますが、これまでのところ次のようなものがありますが、セレクターの動作方法がわかりません。
(function($) {
$.fn.stripe = function(){
this.$("li:even").css("background-color","#f00");
};
})(jQuery);
$("list_id").stripe();
解決
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>
他のヒント
ここでjQueryを使用した複雑な答えがたくさんあります。必要なのは、ほんの少しのCSSだけです:
ul > li:nth-of-type(odd) {
background-color: #f9f9f9 ;
}
$(this).children('li:even').css("background-color","#f00");
順不同リストの子を呼び出す呼び出しがあります
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);
最良の方法は nth-child
CSS3プロパティを使用することだと思います
次のようなもの:
.black-one {
background: black;
}
<script type="text/javascript">
$("#list1 li:nth-child(2n+2)").addClass("black-one");
</script>
所属していません StackOverflow