Maison  >  Article  >  interface Web  >  Explication détaillée de quatre solutions pour obtenir le premier positionnement li de jq ul

Explication détaillée de quatre solutions pour obtenir le premier positionnement li de jq ul

高洛峰
高洛峰original
2017-01-04 14:23:401624parcourir

Si nous obtenons juste le premier li dans un ul, alors nous pouvons écrire comme ceci :

$("ul li:first");
$("ul li"). 0);
$("ul li").first();
$("ul li").slice(0,1);//Le premier paramètre de slice représente le début de la sélection Position, le deuxième paramètre est la position finale

<ul>
<li>安哲</li>
<li>安哲</li>
<li>安哲</li>
<li>安哲</li>
</ul>
<ul>
<li>安哲</li>
<li>安哲</li>
<li>安哲</li>
<li>安哲</li>
</ul>
<ul>
<li>安哲</li>
<li>安哲</li>
<li>安哲</li>
<li>安哲</li>
</ul>
<ul>
<li>安哲</li>
<li>安哲</li>
<li>安哲</li>
<li>安哲</li>
</ul>

J'ai écrit sur quatre solutions

<script type="text/javascript">
//方案一
$(function(){
var list=$("ul");
for (var i = 0; i < list.length; i++) {
$("ul:eq("+i+") li:first").css("background","red");
 
}
});
//方案二
/*$(function(){
$("ul").each(function(){
$(this).children().first().css("background","red"); 
});
});*/
//方案三
/*$(function(){
$("ul li:nth-child(1)").css("background","red");
});*/
//方案四
/*$(function(){
$("ul li:first-child").css("background","red");
});*/
</script>

Ce qui précède est tout le contenu de cet article, j'espère que c'est utile à tout le monde, merci de soutenir le site Web PHP chinois !

Pour des explications plus détaillées sur l'obtention des quatre solutions pour le premier positionnement li de jq ul, veuillez faire attention au site Web PHP chinois pour les articles connexes !


Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn