首页 > 代码库 > 选中多个<ul>中的第一个<li>方法

选中多个<ul>中的第一个<li>方法

2024-08-20 03:09:20   220人阅读

获取第一个ul中的第一个li标签的方法:

 //获取第一个ul中的第一个li
     /* $("ul li:first").css("background","pink");
     $("ul li").eq(0).css("background","pink");
     $("ul li").first().css("background","pink");
     $("ul li").slice(0,1).css("background","pink");//s */lice第一个参数表示的选取开始的位置，第二个参数是结束的位置

 

选中如下代码中的各个ul中的第一个li标签

<body>
<ul>
  <li>第一个</li>
  <li>第二个</li>
  <li>第三个</li>
</ul>
<ul>
  <li>第一个</li>
  <li>第二个</li>
  <li>第三个</li>
</ul>
<ul>
  <li>第一个</li>
  <li>第二个</li>
  <li>第三个</li>
</ul>
</body>

共有四种方案:

方案一:

$(function(){
   var list=$("li");
   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");
});

 

效果如下代码:

技术分享

 

选中多个<ul>中的第一个<li>方法


联系
我们