详解获取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 相关文章推荐
jquery键盘事件介绍
Jan 31 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
Jun 24 Javascript
jQuery把表单元素变为json对象
Nov 06 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
May 30 Javascript
JavaScript禁止用户多次提交的两种方法
Jul 24 Javascript
最细致的vue.js基础语法 值得收藏!
Nov 03 Javascript
vue的toast弹窗组件实例详解
May 14 Javascript
bootstrap动态调用select下拉框的实例代码
Aug 09 Javascript
JS查找孩子节点简单示例
Jul 25 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
JavaScript事件的委托(代理)的用法示例详解
Feb 18 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
Zend Studio (eclipse)使用速度优化方法
2011/03/23 PHP
php验证码生成代码
2015/11/11 PHP
对PHP依赖注入的理解实例分析
2016/10/09 PHP
vmware linux系统安装最新的php7图解
2019/04/14 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
在js中单选框和复选框获取值的方式
2009/11/06 Javascript
javascript对象之内置对象Math使用方法
2010/04/16 Javascript
javascript实现点击后变换按钮显示文字的方法
2015/05/13 Javascript
手机端页面rem宽度自适应脚本
2015/05/20 Javascript
AngularJs Javascript MVC 框架
2016/06/20 Javascript
require简单实现单页应用程序(SPA)
2016/07/12 Javascript
详解JS中遍历语法的比较
2017/04/07 Javascript
简单实现js点击展开二级菜单功能
2017/05/16 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
2017/09/12 jQuery
vue 通过下拉框组件学习vue中的父子通讯
2017/12/19 Javascript
vue移动端UI框架实现QQ侧边菜单组件
2018/03/09 Javascript
JavaScript函数apply()和call()用法与异同分析
2018/08/10 Javascript
JSX在render函数中的应用详解
2019/09/04 Javascript
javascript移动端 电子书 翻页效果实现代码
2019/09/07 Javascript
toString.call()通用的判断数据类型方法示例
2020/08/28 Javascript
基python实现多线程网页爬虫
2015/09/06 Python
python如何发布自已pip项目的方法步骤
2018/10/09 Python
基于FME使用Python过程图解
2020/05/13 Python
CSS3中动画属性transform、transition和animation属性的区别
2016/09/25 HTML / CSS
澳洲的UGG雪地靴超级市场:Uggs.com.au
2020/04/06 全球购物
strstr()的简单实现
2013/09/26 面试题
异步传递消息系统的作用
2016/05/01 面试题
护理工作感言
2014/01/16 职场文书
企业车辆管理制度
2014/01/24 职场文书
高二生物教学反思
2014/01/27 职场文书
荷叶母亲教学反思
2014/04/30 职场文书
师德师风个人自我剖析材料
2014/09/27 职场文书
个人房屋买卖协议书(范本)
2014/10/04 职场文书
机关作风建设工作总结
2014/10/23 职场文书
2014年小学体育工作总结
2014/12/11 职场文书
2015年财政所工作总结
2015/04/25 职场文书