详解获取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 相关文章推荐
IE6、IE7中获取Button元素的值的bug说明
Aug 28 Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
Jun 05 Javascript
a标签的href和onclick 的事件的区别介绍
Jul 26 Javascript
node.js中的console.log方法使用说明
Dec 09 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
Jan 03 Javascript
jquery实现焦点轮播效果
Feb 23 Javascript
极简主义法编写JavaScript类
Nov 02 Javascript
vue+swiper实现侧滑菜单效果
Dec 28 Javascript
使用RxJS更优雅地进行定时请求详析
Jun 02 Javascript
JavaScript遍历数组和对象的元素简单操作示例
Jul 09 Javascript
使用layui实现树形结构的方法
Sep 20 Javascript
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 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将整个网站生成HTML纯静态网页的方法总结
2012/02/05 PHP
php分享朋友圈的实现代码
2019/02/18 PHP
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
2009/11/24 Javascript
屏蔽F1~F12的快捷键的js函数
2010/05/06 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
2012/09/19 Javascript
如何用js控制frame的隐藏或显示的解决办法
2013/03/20 Javascript
一个JavaScript的求爱小特效
2014/05/09 Javascript
Nodejs的express使用教程
2015/11/23 NodeJs
很全面的JavaScript常用功能汇总集合
2016/01/22 Javascript
AngularJS控制器之间的数据共享及通信详解
2016/08/01 Javascript
总结JavaScript的正则与其他语言的不同之处
2016/08/25 Javascript
javascript中的try catch异常捕获机制用法分析
2016/12/14 Javascript
angularjs $http实现form表单提交示例
2017/06/09 Javascript
Angular.js中下拉框实现渲染html的方法
2017/06/18 Javascript
nodejs实现大文件(在线视频)的读取
2020/10/16 NodeJs
Vue完整项目构建(进阶篇)
2018/02/10 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
2019/02/27 Javascript
详解一个基于套接字实现长连接的express
2019/03/28 Javascript
mpvue微信小程序开发之实现一个弹幕评论
2019/11/24 Javascript
vue element 关闭当前tab 跳转到上一路由操作
2020/07/22 Javascript
理解python多线程(python多线程简明教程)
2014/06/09 Python
Google开源的Python格式化工具YAPF的安装和使用教程
2016/05/31 Python
Python 内置函数complex详解
2016/10/23 Python
python3.x 将byte转成字符串的方法
2018/07/17 Python
python将数组n等分的实例
2019/12/02 Python
Python中的全局变量如何理解
2020/06/04 Python
DataFrame 数据合并实现(merge,join,concat)
2020/06/14 Python
Python Opencv轮廓常用操作代码实例解析
2020/09/01 Python
html5教程画矩形代码分享
2013/12/04 HTML / CSS
宝拉珍选英国官网:Paula’s Choice英国
2019/05/29 全球购物
屈臣氏泰国官网:Watsons TH
2021/02/23 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?
2014/07/27 面试题
小学红领巾中秋节广播稿
2014/01/13 职场文书
php引用传递
2021/04/01 PHP
python Django框架快速入门教程(后台管理)
2021/07/21 Python
Spring中的使用@Async异步调用方法
2021/11/01 Java/Android