jQuery는 ul에 줄무늬를 추가합니다
-
06-07-2019 - |
문제
안녕하세요 저는 정렬되지 않은 목록에 줄무늬 효과를 추가하는 기능을 만들려고 노력하고 있습니다. 지금까지 다음은 얻었지만 선택기의 작동 방식을 해결할 수 없습니다.
(function($) {
$.fn.stripe = function(){
this.$("li:even").css("background-color","#f00");
};
})(jQuery);
$("list_id").stripe();
해결책
Reko가 말했듯이, 이것을 구현하는 가장 좋은 방법은 Pseudo 홀수 및 짝수를 사용하는 것입니다. 다음과 동일하게 구현해보십시오.
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");
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);
가장 좋은 방법은 사용하는 것입니다 nth-child
CSS3 속성 :
.black-one {
background: black;
}
<script type="text/javascript">
$("#list1 li:nth-child(2n+2)").addClass("black-one");
</script>
제휴하지 않습니다 StackOverflow