详解获取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切换显示的效果实例代码
Feb 27 Javascript
不使用浏览器运行javascript代码的方法
Jul 24 Javascript
深入理解Javascript动态方法调用与参数修改的问题
Dec 10 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
Jun 15 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
Nov 01 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
May 20 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
详解vue 兼容IE报错解决方案
Dec 29 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
Jan 15 Javascript
小程序云函数调用API接口的方法
May 17 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
May 06 Javascript
手写Spirit防抖函数underscore和节流函数lodash
Mar 22 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版自动生成文章摘要
2008/07/23 PHP
php imagecreatetruecolor 创建高清和透明图片代码小结
2010/05/15 PHP
php开发过程中关于继承的使用方法分享
2011/06/17 PHP
PHP Undefined index报错的修复方法
2011/07/17 PHP
利用中国天气预报接口实现简单天气预报
2014/01/20 PHP
PDO操作MySQL的基础教程(推荐)
2017/08/18 PHP
PHP静态方法和静态属性及常量属性的区别与介绍
2019/03/22 PHP
php数值计算num类简单操作示例
2020/05/15 PHP
js加解密 脚本解密
2008/02/22 Javascript
菜鸟javascript基础整理1
2010/12/06 Javascript
原生javascript实现图片按钮切换
2015/01/12 Javascript
浅谈javascript获取元素transform参数
2015/07/24 Javascript
深入浅析JavaScript中的scrollTop
2016/07/11 Javascript
Vue.js每天必学之数据双向绑定
2016/09/05 Javascript
jquery插件开发之选项卡制作详解
2017/08/30 jQuery
jquery animate动画持续运动的实例
2017/11/29 jQuery
深入浅析Vue中的slots/scoped slots
2018/04/03 Javascript
Vue filter 过滤当前时间 实现实时更新效果
2019/12/20 Javascript
javascript浅层克隆、深度克隆对比及实例解析
2020/02/09 Javascript
three.js 将图片马赛克化的示例代码
2020/07/31 Javascript
利用Python获取赶集网招聘信息前篇
2016/04/18 Python
Django 添加静态文件的两种实现方法(必看篇)
2017/07/14 Python
python实现决策树分类算法
2017/12/21 Python
Python查找两个有序列表中位数的方法【基于归并算法】
2018/04/20 Python
django-rest-framework 自定义swagger过程详解
2019/07/18 Python
django中瀑布流写法实例代码
2019/10/14 Python
基于h5py的使用及数据封装代码
2019/12/26 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
Python使用lambda抛出异常实现方法解析
2020/08/20 Python
python定时截屏实现
2020/11/02 Python
python中@contextmanager实例用法
2021/02/07 Python
村干部承诺书
2014/03/28 职场文书
后勤工作个人总结
2015/02/28 职场文书
小学生安全保证书
2015/05/09 职场文书
校园运动会广播稿
2015/08/19 职场文书
Python Pandas读取Excel日期数据的异常处理方法
2022/02/28 Python