详解获取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 相关文章推荐
解放web程序员的输入验证
Oct 06 Javascript
CSS(js)限制页面显示的文本字符长度
Dec 27 Javascript
js中onload与onunload的使用示例
Aug 25 Javascript
浅析jQuery1.8的几个小变化
Dec 10 Javascript
javascript 获取元素样式必杀技
May 04 Javascript
js实现文本框支持加减运算的方法
Aug 19 Javascript
浅谈javascript中的constructor
Jun 08 Javascript
JSON与XML的区别对比及案例应用
Nov 11 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
Jan 13 Javascript
对类Vue的MVVM前端库的实现代码
Sep 07 Javascript
js实现简单音乐播放器
Jun 30 Javascript
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
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表单提交问题的解决方法
2011/04/12 PHP
PHP中比较时间大小实例
2014/08/21 PHP
thinkphp利用模型通用数据编辑添加和删除的实例代码
2016/11/20 PHP
PHP CURL采集百度搜寻结果图片不显示问题的解决方法
2017/02/03 PHP
PHP curl 或 file_get_contents 获取需要授权页面的方法
2017/05/05 PHP
JS定时器实例
2013/04/17 Javascript
jquery组件使用中遇到的问题整理及解决
2014/02/21 Javascript
JS实用的动画弹出层效果实例
2015/05/05 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
2015/08/07 Javascript
深入学习JavaScript中的原型prototype
2015/08/13 Javascript
web前端开发JQuery常用实例代码片段(50个)
2015/08/28 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
2015/09/15 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
2015/12/02 Javascript
JavaScript设计模式初探
2016/01/07 Javascript
JavaScript动态添加事件之事件委托
2016/07/12 Javascript
Vue.js第三天学习笔记(计算属性computed)
2016/12/01 Javascript
微信小程序开发之map地图实现教程
2017/06/08 Javascript
bootstrap与pagehelper实现分页效果
2018/12/29 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
2019/02/10 Javascript
vue实现点击隐藏与显示实例分享
2019/02/13 Javascript
python基础教程之简单入门说明(变量和控制语言使用方法)
2014/03/25 Python
Python设计模式之备忘录模式原理与用法详解
2019/01/15 Python
情人节快乐! python绘制漂亮玫瑰
2020/08/18 Python
python标准库OS模块详解
2020/03/10 Python
Python HTTP下载文件并显示下载进度条功能的实现
2020/04/02 Python
深入了解Python enumerate和zip
2020/07/16 Python
python asyncio 协程库的使用
2021/01/21 Python
Envie de Fraise意大利:法国网上推出的孕妇装品牌
2020/10/18 全球购物
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2016/01/06 面试题
毕业生写求职信的要点
2014/03/04 职场文书
个园导游词
2015/02/04 职场文书
2016年小学推普宣传周活动总结
2016/04/06 职场文书
预备党员入党思想汇报(范文)
2019/08/14 职场文书
python基础之爬虫入门
2021/05/10 Python
忆童年!用Python实现愤怒的小鸟游戏
2021/06/07 Python
HTML5基础学习之文本标签控制
2022/03/25 HTML / CSS