详解获取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 12 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
Oct 18 Javascript
解决jquery中美元符号命名冲突问题
Jan 08 Javascript
node.js中Socket.IO的进阶使用技巧
Nov 04 Javascript
再谈javascript原型继承
Nov 10 Javascript
js改变embed标签src值的方法
Apr 10 Javascript
javascript中sort() 方法使用详解
Aug 30 Javascript
Jquery ajax基础教程
Nov 20 Javascript
模拟javascript中的sort排序(简单实例)
Aug 17 Javascript
详解React 服务端渲染方案完美的解决方案
Dec 14 Javascript
Vue 动态组件与 v-once 指令的实现
Feb 12 Javascript
JavaScript实现世界各地时间显示
Sep 07 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
php auth_http类库进行身份效验
2009/03/19 PHP
php将图片文件转换成二进制输出的方法
2015/06/10 PHP
php编译安装php-amq扩展简明教程
2016/06/25 PHP
thinkPHP统计排行与分页显示功能示例
2016/12/02 PHP
PHP笛卡尔积实现算法示例
2018/07/30 PHP
Yii框架通过请求组件处理get,post请求的方法分析
2019/09/03 PHP
网页中的图片的处理方法与代码
2009/11/26 Javascript
DIY jquery plugin - tabs标签切换实现代码
2010/12/11 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
2015/10/29 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
JS Attribute属性操作详解
2016/05/19 Javascript
vue图片加载与显示默认图片实例代码
2017/03/16 Javascript
详解Node.js开发中的express-session
2017/05/19 Javascript
浅谈React组件之性能优化
2018/03/02 Javascript
vue中的inject学习教程
2019/04/24 Javascript
vue.js路由mode配置之去掉url上默认的#方法
2019/11/01 Javascript
python的正则表达式re模块的常用方法
2013/03/09 Python
Python列表(list)常用操作方法小结
2015/02/02 Python
详解Django缓存处理中Vary头部的使用
2015/07/24 Python
解决Linux系统中python matplotlib画图的中文显示问题
2017/06/15 Python
Python中的__slots__示例详解
2017/07/06 Python
Python 实现12306登录功能实例代码
2018/02/09 Python
Python使用cx_Freeze库生成msi格式安装文件的方法
2018/07/10 Python
基于python实现学生管理系统
2018/10/17 Python
Python解析、提取url关键字的实例详解
2018/12/17 Python
python根据多个文件名批量查找文件
2019/08/13 Python
Python打包模块wheel的使用方法与将python包发布到PyPI的方法详解
2020/02/12 Python
python利用线程实现多任务
2020/09/18 Python
Selenium关闭INFO:CONSOLE提示的解决
2020/12/07 Python
怎么写好自荐信
2013/10/30 职场文书
如何写好升职自荐信
2014/01/06 职场文书
党的群众路线教育实践活动个人对照检查材料(教师)
2014/11/04 职场文书
投标承诺函格式
2015/01/21 职场文书
小学教师个人总结
2015/02/05 职场文书
2016年高校自主招生自荐信范文
2015/03/24 职场文书
毕业论文致谢格式模板
2015/05/14 职场文书