详解获取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 相关文章推荐
phpwind放自动注册方法
Dec 02 Javascript
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
Dec 02 Javascript
Android中的jQuery:AQuery简介
May 06 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
Jun 06 Javascript
教你如何使用node.js制作代理服务器
Nov 26 Javascript
JS留言功能的简单实现案例(推荐)
Jun 23 Javascript
深入理解Angularjs中$http.post与$.post
May 19 Javascript
详解vue引入子组件方法
Feb 12 Javascript
微信小程序云开发之模拟后台增删改查
May 16 Javascript
详解mpvue实现对苹果X安全区域的适配
Jul 31 Javascript
浅谈vue 多个变量同时赋相同值互相影响
Aug 05 Javascript
微信小程序向Java后台传输参数的方法实现
Dec 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
一个ftp类(ini.php)
2006/10/09 PHP
Win2003+apache+PHP+SqlServer2008 配置生产环境
2014/07/29 PHP
PHP实现把文本中的URL转换为链接的auolink()函数分享
2014/07/29 PHP
PHP 7的一些引人注目的新特性简单介绍
2015/11/08 PHP
php 多个变量指向同一个引用($b = &amp;$a)用法分析
2019/11/13 PHP
Javascript 类与静态类的实现
2010/04/01 Javascript
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
js实现两个值相加alert出来精确到指定位
2013/09/25 Javascript
javascript和jquery修改a标签的href属性
2013/12/16 Javascript
创建、调用JavaScript对象的方法集锦
2014/12/24 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
2015/06/06 Javascript
基于javascript实现根据身份证号码识别性别和年龄
2016/01/22 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
2016/09/20 Javascript
JavaScript表单验证的两种实现方法
2017/02/11 Javascript
jQuery实现获取h1-h6标题元素值的方法
2017/03/06 Javascript
JS模拟实现ECMAScript5新增的数组方法
2017/03/20 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
2017/06/22 Javascript
Vue源码学习之关于对Array的数据侦听实现
2019/04/23 Javascript
在Vue中使用antv的示例代码
2020/06/29 Javascript
Openlayers+EasyUI Tree动态实现图层控制
2020/09/28 Javascript
通过vue.extend实现消息提示弹框的方法记录
2021/01/07 Vue.js
python 远程统计文件代码分享
2015/05/14 Python
利用Django模版生成树状结构实例代码
2019/05/19 Python
马来西亚航空官方网站:Malaysia Airlines
2017/07/28 全球购物
利物浦足球俱乐部官方网上商店:Liverpool FC Official Store
2018/01/13 全球购物
80年代复古T恤:TruffleShuffle
2018/07/02 全球购物
客户经理岗位职责
2013/12/08 职场文书
卫校中专生的自我评价
2014/01/15 职场文书
四风个人对照检查材料思想汇报(办公室通用版)
2014/10/07 职场文书
2015年元旦主持词开场白
2014/12/14 职场文书
志愿者事迹材料
2014/12/26 职场文书
社区禁毒宣传活动总结
2015/05/07 职场文书
有关西游记的读书笔记
2015/06/25 职场文书
Python预测分词的实现
2021/06/18 Python
Python实现学生管理系统(面向对象版)
2021/06/24 Python
SpringBoot前端后端分离之Nginx服务器下载安装过程
2022/08/14 Servers