详解获取jq ul第一个li定位的三种解决方案

最新推荐文章于 2022-09-07 10:52:03 发布

梁萌

最新推荐文章于 2022-09-07 10:52:03 发布

阅读量6.3k

点赞数 1

分类专栏： js/jq 文章标签： jq ul获取第一个li jq选择器

原文链接：https://www.w3school.com.cn/tiy/t.asp?f=jquery_hide

版权

js/jq 专栏收录该内容

56 篇文章 3 订阅

订阅专栏

如果是只有一个ul,获取ul中的第一个li,可以用下面五种方法:

代码:

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>

</head>
<body>
<ul>
    <li>第1个</li>
    <li>第2个</li>
    <li>第3个</li>
    <li>第4个</li>
</ul>

<script>
  $(function(){ 
    console.log($("ul li:first").text())

    console.log($("ul li").eq(0).text())

    console.log($("ul li").first().text())

    console.log($("ul").children('li').eq(0).text());
  
    console.log($("ul li:nth-child(1)").text() );
  })
</script>

</body>
</html>

如果有多个ul,都需要获取第一个li元素的话,可以使用下面四种方法:

代码:

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>

</head>
<body>
<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>

<script>
  //方案一
  $(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>

</body>
</html>

梁萌

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
详解获取jq ul第一个li定位的三种解决方案

如果是只有一个ul,获取ul中的第一个li,可以用下面五种方法:代码:<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script></head><body><ul> &...
复制链接

扫一扫