详解获取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 相关文章推荐
CheckBoxList多选样式jquery、C#获取选择项
Sep 06 Javascript
Jquery插件编写简明教程
Mar 25 Javascript
举例简介AngularJS的内部语言环境
Jun 17 Javascript
JavaScript对象学习小结
Sep 02 Javascript
Javascript的表单验证-揭开正则表达式的面纱
Mar 18 Javascript
JavaScript实现form表单的多文件上传
Mar 27 Javascript
VUE element-ui 写个复用Table组件的示例代码
Nov 18 Javascript
探索Vue高阶组件的使用
Jan 08 Javascript
Vue2.0子同级组件之间数据交互方法
Feb 28 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
Apr 13 Javascript
JS一次前端面试经历记录
Mar 19 Javascript
vue中父子组件的参数传递和应用示例
Jan 04 Vue.js
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中file_get_contents与curl性能比较分析
2014/11/08 PHP
javascript打开新窗口同时关闭旧窗口
2009/01/16 Javascript
IE8 chrome中table隔行换色解决办法
2010/07/09 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
jQuery链使用指南
2015/01/20 Javascript
jquery中object对象循环遍历的方法
2015/12/18 Javascript
jQuery实现的放大镜效果示例
2016/09/13 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
2017/04/29 Javascript
Vue多种方法实现表头和首列固定的示例代码
2018/02/02 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
2018/05/24 jQuery
axios向后台传递数组作为参数的方法
2018/08/11 Javascript
JavaScript 截取字符串代码实例
2019/09/05 Javascript
javascript自定义右键菜单插件
2019/12/16 Javascript
JavaScript实现轮播图片完整代码
2020/03/07 Javascript
JS前后端实现身份证号验证代码解析
2020/07/23 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
2020/10/13 Javascript
jQuery实现移动端扭蛋机抽奖
2020/11/08 jQuery
5种Python单例模式的实现方式
2016/01/14 Python
Python数据操作方法封装类实例
2017/06/23 Python
理解python中生成器用法
2017/12/20 Python
使用python存储网页上的图片实例
2018/05/22 Python
Python 实现数据结构中的的栈队列
2019/05/16 Python
python求最大值最小值方法总结
2019/06/25 Python
Python使用import导入本地脚本及导入模块的技巧总结
2019/08/07 Python
在pycharm中debug 实时查看数据操作(交互式)
2020/06/09 Python
python实现最短路径的实例方法
2020/07/19 Python
如何用Anaconda搭建虚拟环境并创建Django项目
2020/08/02 Python
Python 多线程C段扫描、检测 Ping扫描脚本的实现
2020/09/03 Python
Asics日本官网:鬼冢八喜郎创立的跑鞋运动品牌
2017/10/18 全球购物
社区学雷锋活动策划方案
2014/01/30 职场文书
租赁意向书范本
2014/04/01 职场文书
党的群众路线教育实践活动组织生活会发言材料
2014/10/17 职场文书
留学推荐信怎么写
2015/03/26 职场文书
计划生育责任书
2015/05/09 职场文书
前端实现滑动按钮AJAX与后端交互的示例代码
2022/02/24 Javascript
Vue.js中v-bind指令的用法介绍
2022/03/13 Vue.js