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


Posted in Javascript onNovember 23, 2016

如果我们只是获取一个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>

    运行结果

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

以上就是本文的全部内容,希望对大家有所帮助,谢谢对三水点靠木的支持!

Javascript 相关文章推荐
由浅到深了解JavaScript类
Sep 08 Javascript
几个常用的JavaScript字符串处理函数 - split()、join()、substring()和indexOf()
Jun 02 Javascript
jquery获取复选框被选中的值
Apr 10 Javascript
jQuery圆形统计图开发实例
Jan 04 Javascript
jQuery使用之设置元素样式用法实例
Jan 19 Javascript
AngularJS ng-repeat数组有重复值的解决方法
Oct 23 Javascript
详解webpack+gulp实现自动构建部署
Jun 29 Javascript
React-Native做一个文本输入框组件的实现代码
Aug 10 Javascript
微信小程序使用request网络请求操作实例
Dec 15 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
Mar 06 Javascript
Vue实现表格中对数据进行转换、处理的方法
Sep 06 Javascript
js获取 gif 的帧数的代码实例
Sep 10 Javascript
jquery实现点击页面回到顶部
Nov 23 #Javascript
通过原生JS实现为元素添加事件的方法
Nov 23 #Javascript
微信小程序开发一键登录 获取session_key和openid实例
Nov 23 #Javascript
JavaScript基于自定义函数判断变量类型的实现方法
Nov 23 #Javascript
JavaScript实现的CRC32函数示例
Nov 23 #Javascript
JavaScript 控制字体大小设置的方法
Nov 23 #Javascript
微信小程序  wx.request合法域名配置详解
Nov 23 #Javascript
You might like
thinkPHP实现MemCache分布式缓存功能
2016/03/23 PHP
单击复制文字兼容各浏览器的完美解决方案
2013/07/04 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
2014/05/02 Javascript
JavaScript给url网址进行encode编码的方法
2015/03/18 Javascript
jQuery拖拽插件gridster使用指南
2015/04/21 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
2015/06/19 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
2016/06/06 Javascript
使用Web Uploader实现多文件上传
2016/06/08 Javascript
JS正则表达式之非捕获分组用法实例分析
2016/12/28 Javascript
原生js实现弹出层效果
2017/01/20 Javascript
js实现省份下拉菜单效果
2017/02/15 Javascript
基于node下的http小爬虫的示例代码
2018/01/11 Javascript
vue 路由嵌套高亮问题的解决方法
2018/05/17 Javascript
微信小程序滑动选择器的实现代码
2018/08/10 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
2019/08/26 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
2019/11/09 Javascript
python实现爬虫统计学校BBS男女比例(一)
2015/12/31 Python
python anaconda 安装 环境变量 升级 以及特殊库安装的方法
2017/06/21 Python
Python检测网络延迟的代码
2018/05/15 Python
Python 解析pymysql模块操作数据库的方法
2020/02/18 Python
python使用列表的最佳方案
2020/08/12 Python
Python 使用office365邮箱的示例
2020/10/29 Python
python利用proxybroker构建爬虫免费IP代理池的实现
2021/02/21 Python
物业管理公司实习生自我鉴定
2013/09/19 职场文书
三年级音乐教学反思
2014/01/28 职场文书
浪费资源的建议书
2014/03/12 职场文书
教师产假请假条范文
2014/04/10 职场文书
企业口号大全
2014/06/12 职场文书
小学社会实践活动总结
2014/07/03 职场文书
2014年保安个人工作总结
2014/11/13 职场文书
二年级语文上册复习计划
2015/01/19 职场文书
公司员工辞职信范文
2015/05/12 职场文书
详解JavaScript中的执行上下文及调用堆栈
2021/04/29 Javascript
SQL语句中EXISTS的详细用法大全
2022/06/25 MySQL
JS前端使用canvas实现物体的点选示例
2022/08/05 Javascript
基于Redission的分布式锁实战
2022/08/14 Redis