详解获取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之ESC(第二类混淆)
May 06 Javascript
childNodes.length与children.length的区别
May 14 Javascript
JS俄罗斯方块,包含完整的设计理念
Dec 11 Javascript
jQuery布局插件UI Layout简介及使用方法
Apr 03 Javascript
jquery.form.js用法之清空form的方法
Mar 07 Javascript
javascript中createElement的两种创建方式
May 14 Javascript
微信小程序 location API接口详解及实例代码
Oct 12 Javascript
JS解决移动web开发手机输入框弹出的问题
Mar 31 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
Apr 26 Javascript
Angular2中select用法之设置默认值与事件详解
May 07 Javascript
微信小程序单选框自定义赋值
May 26 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
Jul 14 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内容分页代码分享
2015/01/14 PHP
解决PHP程序运行时:Fatal error: Maximum execution time of 30 seconds exceeded in的错误提示
2016/11/25 PHP
PHP使用 Pear 进行安装和卸载包的方法详解
2019/07/08 PHP
图片自动更新(说明)
2006/10/02 Javascript
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
2010/08/12 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
javascript中方便增删改cookie的一个类
2012/10/11 Javascript
JavaScript转换农历类实现及调用方法
2013/01/27 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
2013/07/04 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
2013/12/16 Javascript
node.js中的fs.ftruncate方法使用说明
2014/12/15 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
2014/12/31 Javascript
JavaScript中的普通函数与构造函数比较
2015/04/07 Javascript
JavaScript实现点击按钮切换网页背景色的方法
2015/10/17 Javascript
Angularjs整合微信UI(weui)
2016/03/15 Javascript
jQuery子元素过滤选择器用法示例
2016/09/09 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
2020/09/21 Javascript
Python中实现的RC4算法
2015/02/14 Python
Python2中的raw_input() 与 input()
2015/06/12 Python
Python基础教程之异常详解
2019/01/10 Python
Python爬取爱奇艺电影信息代码实例
2019/11/26 Python
三个python爬虫项目实例代码
2019/12/28 Python
基于python3生成标签云代码解析
2020/02/18 Python
python和go语言的区别是什么
2020/07/20 Python
如何用tempfile库创建python进程中的临时文件
2021/01/28 Python
sklearn中的交叉验证的实现(Cross-Validation)
2021/02/22 Python
HTML5实践-图片设置成灰度图
2012/11/12 HTML / CSS
伦敦著名的运动鞋综合商店:Footpatrol
2019/03/25 全球购物
英国在线药房和在线医生:LloydsPharmacy
2019/10/21 全球购物
用C语言实现文件读写操作
2013/10/27 面试题
班级安全教育实施方案
2014/02/23 职场文书
一位农村小子的自荐信
2014/04/07 职场文书
个人作风建设心得体会
2014/10/22 职场文书
先进集体事迹材料范文
2014/12/25 职场文书
mysql的数据压缩性能对比详情
2021/11/07 MySQL
SONY AN-LP1 短波有源天线放大器图
2022/04/05 无线电