jquery agregando rayas a ul
-
06-07-2019 - |
Pregunta
Hola, estoy tratando de hacer una función que agregue un efecto de rayas a una lista desordenada, hasta ahora tengo lo siguiente, pero no puedo entender cómo debería funcionar el selector.
(function($) {
$.fn.stripe = function(){
this.$("li:even").css("background-color","#f00");
};
})(jQuery);
$("list_id").stripe();
Solución
Como ha dicho reko, la mejor manera de implementar esto es usando el pseudo impar y par. Intente implementarlo igual que lo siguiente:
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>
Otros consejos
Muchas respuestas complicadas usando jQuery aquí. Todo lo que necesitas es un poco de CSS:
ul > li:nth-of-type(odd) {
background-color: #f9f9f9 ;
}
$(this).children('li:even').css("background-color","#f00");
Tienes la llamada la llamada a los hijos de la lista desordenada
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);
Creo que la mejor manera es usar la propiedad CSS3 nth-child
Algo así como:
.black-one {
background: black;
}
<script type="text/javascript">
$("#list1 li:nth-child(2n+2)").addClass("black-one");
</script>
Demostración: http://codepen.io/anon/pen/doWyKg
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow