jquery ajoutant des rayures à ul
-
06-07-2019 - |
Question
Bonjour, j'essaye de créer une fonction qui ajoutera un effet de bande à une liste non ordonnée. J'ai les éléments suivants jusqu'à présent, mais je ne peux pas comprendre comment le sélecteur devrait fonctionner.
(function($) {
$.fn.stripe = function(){
this.$("li:even").css("background-color","#f00");
};
})(jQuery);
$("list_id").stripe();
La solution
Comme reko l’a dit, la meilleure façon de le faire consiste à utiliser le pseudo impair et pair. Essayez de le mettre en œuvre comme suit:
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>
Autres conseils
Beaucoup de réponses compliquées utilisant jQuery ici. Tout ce dont vous avez besoin, c'est un peu de CSS:
ul > li:nth-of-type(odd) {
background-color: #f9f9f9 ;
}
$(this).children('li:even').css("background-color","#f00");
Vous avez l'appelez l'appelez les enfants de la liste désordonnée
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);
Je pense que le meilleur moyen consiste à utiliser la propriété CSS3 nth-child
Quelque chose comme:
.black-one {
background: black;
}
<script type="text/javascript">
$("#list1 li:nth-child(2n+2)").addClass("black-one");
</script>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow