jquery aggiungendo strisce a ul
-
06-07-2019 - |
Domanda
Ciao, sto cercando di creare una funzione che aggiunga un effetto a strisce a un elenco non ordinato, finora ho ottenuto quanto segue, ma non riesco a capire come dovrebbe funzionare il selettore.
(function($) {
$.fn.stripe = function(){
this.$("li:even").css("background-color","#f00");
};
})(jQuery);
$("list_id").stripe();
Soluzione
Come ha detto reko, il modo migliore per implementarlo è usare lo pseudo dispari e pari. Prova a implementarlo come il seguente:
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>
Altri suggerimenti
Molte risposte complicate usando jQuery qui. Tutto ciò che serve è un po 'di CSS:
ul > li:nth-of-type(odd) {
background-color: #f9f9f9 ;
}
$(this).children('li:even').css("background-color","#f00");
Hai la chiamata chiamata i figli della lista non ordinata
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);
Penso che il modo migliore sia usare la proprietà CSS3 nth-child
Qualcosa del tipo:
.black-one {
background: black;
}
<script type="text/javascript">
$("#list1 li:nth-child(2n+2)").addClass("black-one");
</script>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow