Comment faire en sorte que chaque <li> avec des couleurs de fond différentes ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="dvi1" class="div1">
<ul id="ul" class="ul">
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
</ul>
</div>
</body>
</html>C'est un exemple où j'ai itéré à travers tous les li dans votre document et de modifier leur background couleur. J'ai prédéfini des couleurs et après ça j'utilise juste Math.random() pour obtenir une couleur aléatoire à partir d'un tableau donné.
$('li').each(function() {
var back = ["green","blue","gray","yellow","orange","purple","black"];
var rand = back[Math.floor(Math.random() * back.length)];
$(this).css('background',rand);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="dvi1" class="div1">
<ul id="ul" class="ul">
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
</ul>
</div>
</body>
</html>EDIT : Comme demandé dans les commentaires J'ai ajouté une fonction récursive qui empêchera la boucle de définir la même couleur deux fois de suite.
var lastPick;
var rand;
$('li').each(function() {
$(this).css('background',randomColor());
});
function randomColor() {
var back = ["green","blue","gray","yellow","orange","purple","pink"];
rand = back[Math.floor(Math.random() * back.length)];
rand==lastPick?randomColor():rand;
lastPick = rand;
return rand;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="dvi1" class="div1">
<ul id="ul" class="ul">
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
</ul>
</div>
</body>
</html>
C'est très facile avec CSS. Vous pouvez utiliser soit :nth-child o :nth-of-type pseudo-sélecteurs.
Pour rendre les choses vraiment simples pour commencer, considérons le HTML suivant (j'ajouterai votre code plus tard) :
<div>
<p>This is our first paragraph</p> <!-- This one should be blue -->
<p>This is our second paragraph</p> <!-- This one should be red -->
</div>Sur la base de ce HTML, si nous voulions faire de la <p> éléments de couleurs différentes, nous pourrions écrire l'une ou l'autre des CSS suivantes :
Option 1
p:nth-of-type(1) {
color: blue;
}
p:nth-of-type(2) {
color: red;
}Option 2
p:nth-child(1) {
color: blue;
}
p:nth-child(2) {
color: red;
} C'est assez facile de voir ce qui se passe ici. Le nombre entre les parenthèses représente l'élément que vous voulez sélectionner (1 = premier élément, 2 = deuxième élément, 3 = troisième élément, etc.) Cela n'est pas très utile si l'on ne veut pas écrire manuellement beaucoup de CSS pour chaque nombre possible d'éléments.
Prenez votre propre code comme exemple ici. Vous avez une liste - cette liste peut être utilisée uniquement pour quelque chose avec un nombre fixe d'éléments (comme un menu de navigation). Dans ce cas, pas de problème. Nous connaissons le nombre d'éléments que nous devons styliser, et nous pouvons donc (probablement) nous contenter d'écrire du CSS pour une poignée d'éléments.
Cependant, si votre liste est alimentée dynamiquement (à partir d'une base de données ou via Javascript), il y aura un nombre potentiellement infini d'éléments. Ou, si nous ne savons pas encore quelle sera la taille de la liste, et qu'il se trouve qu'elle sera assez grande, nous devrons probablement trouver un moyen plus efficace d'écrire notre CSS. Ce qui m'amène à...
Les n-règles ne sont rien d'autre que de l'algèbre, dans sa forme la plus basique. Vous vous souvenez de ces questions de mathématiques ennuyeuses qu'on vous posait à l'école ?
Si n = 2, quelle est la valeur de 5n + 1 ?
Oui, elles sont revenues vous hanter. Dans le cas de la question ci-dessus - nous savons que la réponse est 11. Les n-règles sont plus ou moins écrites de la même manière :
li:nth-of-type(5n+1) {
color: green;
}Dans le cas de l'exemple ci-dessus, nous sélectionnons tous les 5 éléments. Si nous écrivions notre règle n comme 2n+1 nous choisirions un élément sur deux. Ainsi, une règle de 10n+1 sélectionnerait tous les 10 éléments. L'écart entre les éléments augmente ou diminue, en fonction de la valeur du multiplicateur précédent. n .
Si on ne changeait pas le multiplicateur, mais qu'on changeait le +1 de notre règle n, nous changerions le décalage (c'est-à-dire le premier élément affecté par notre règle). Le site +1 dit en gros "commencez-moi au premier élément". Donc +2 nous ferait commencer sur le deuxième élément, et ainsi de suite.
Cela signifie également que vous pouvez avoir une règle comme celle-ci 3n-1 ce qui nous ferait commencer par le tout dernier élément.
Donc, pour donner un exemple avec votre code. Disons que vous voulez les éléments suivants dans votre liste :
Vous pourriez écrire la règle CSS suivante :
li:nth-of-type(3n+1) {
font-weight: bold;
}
li:nth-of-type(3n+2) {
background: blue;
}
li:nth-of-type(3n+3) {
color: red;
}Mais pourquoi cela fonctionne-t-il ? Si vous voulez en savoir plus, et faire quelques expériences sur les n-rules - jetez un coup d'oeil à Trucs et astuces CSS : nth Tester
En ce moment, vous pensez probablement "quelle est la différence entre :nth-of-type y :nth-child ?"
:nth-child selector : Ceci appliquera des styles CSS à un élément, si les deux conditions suivantes sont vraies :
:nth-of-type selector : Ceci appliquera des styles CSS à un élément, si la condition suivante est vraie :
Il y a une différence subtile entre les deux. Mais en gros, :nth-child est plus spécifique quant à ce qu'il sélectionne. Ce qui peut avoir son utilité - parce que nous pourrions spécifier une règle avec :nth-of-type et ensuite utiliser :nth-child pour remplacer cette règle pour des éléments spécifiques.
En savoir plus sur eux aquí
J'espère que cela vous aidera :)
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
