详解获取jq ul第一个li定位的四种解决方案
更新时间：2016年11月23日 11:43:48 作者：川哥哥
本篇文章主要介绍了多个ul中获取第一个li定位的四种解决方案，需要的朋友可以过来参考下
如果我们只是获取一个ul中的第一个li的话，那么我们可以这样写：
$("ul li:first");
$("ul li").eq(0);
$("ul li").first();
$("ul li").slice(0,1);//slice第一个参数表示的选取开始的位置，第二个参数是结束的位置
<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 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>
运行结果
以上就是本文的全部内容，希望对大家有所帮助，谢谢对脚本之家的支持！
相关文章
本文介绍一个treepanel动态加载数据的例子，需要了解的朋友可以参考下2012-12-12
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
这篇文章主要介绍了jQuery插件echarts实现的循环生成图效果,结合完整实例形式分析了echarts插件循环输出数字图形的实现步骤与相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2017-03-03
下面小编就为大家带来一篇jQuery unbind 删除绑定事件详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
下面小编就为大家分享一篇解决easyui日期时间框ie的兼容的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
下面链接中是我用jQuery的扩展来实现的表格分页和排序，使用这个扩展必须加上表头<thead>和<tbody>标签，因为我是 通过<tbody>来进行分页的，要是不加thead，那么表头也要作为分页计算时的一个行了。2011-03-03
冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件，有需要的朋友可以参考一下2013-10-10
这篇文章主要介绍了jquery采用oop模式class类的使用方法,结合实例形式分析了jQuery模拟oop模式定义class类与方法的技巧,需要的朋友可以参考下2016-01-01
jQuery v3.3.1的BUG以及解决办法(附解决方案)
这篇文章描述了我们 FineUIPro 产品 更新中遇到的一个问题，最终将问题定位到 jQuery.position() 函数，虽然jQuery的做法是依照HTML规范来的，但是 jQuery.offsetParent() 和 jQuery.position() 两个函数有冲突，并且会导致之前的jQuery插件出错，应该算是一个BUG吧2023-03-03
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
在这节，我们将看到如何把多行文本框的内容复制到剪贴板上。注意：jQuery clipboard plugin 只支持IE2012-01-01
这篇文章主要为大家详细介绍了网页瀑布流布局jQuery实现方式,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
最新评论