详解获取jq ul第一个li定位的四种解决方案

如果我们只是获取一个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>

运行结果

以上就是本文的全部内容，希望对大家有所帮助，谢谢对我们的支持！

赞 (0)

相关推荐

  • JQuery中两个ul标签的li互相移动实现方法

    本文实例讲述了JQuery中两个ul标签的li互相移动实现方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

  • 加载列表时jquery获取ul中第一个li的属性

    当加载列表时,默认希望选中第一条.top_menu 为ul的ID 通过 $("#top_menu li:first") 就可以获取到 ul下第一个li标签.然后就可以利用 例如 修改属性:$("#top_menu li:first").attr("class","select"); 触发事件:$("#top_menu li:first").click(); 如果想获取li下的 a标签,如下: $("

  • jQuery实现为LI列表前3行设置样式的方法【2种方法】

    jQuery实现为LI列表前3行设置样式的方法【2种方法】

    本文实例讲述了jQuery实现为LI列表前3行设置样式的方法.分享给大家供大家参考,具体如下: 在设计网页模板的时候,为了突出信息的重要性以及美观度,我们会设置一些样式使LI文章列表的前3行加上不同的样式,例如给LI文章列表的前3行文字颜色设置红色,再例如图片列表的时候设置列表第一张图片.第二张图片等的宽和高,都可以用蓝叶分享的这两种方法为LI列表设置样式:对于懂PHP语言的设计者来说,很容易就可以实现的效果,对于不懂PHP语言的可以使用这两种方法也很轻松的实现自己想要的各种效果. <!DOCT

  • jQuery 获取页面li数组并删除不在数组中的key

    先给大家说下应用场景: 获取页面 li 下面 key的值,添加到 arr数组 删除车型不在arr 数组中的value值. 示例代码: var getSaleModels = function(brand_id){ if(brand_id){ var li = $(".pinpai-chexing"+brand_id+" li"); var arr = new Array(); if (li.length > 0){ li.each(function(index

  • jQuery判断当前点击的是第几个li的代码

    使用$(this).index()取得li的下标,下面是一个样式替换的例子: $("#aa li").click(function(){ $("#aa li").removeClass("class名字,多个class用空格分开"); $(this).addClass("class名字,多个class用空格分开"); if($(this).index()!=0){ $("#submenu").hide();

  • Jquery和JS获取ul中li标签的实现方法

    js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElementsByTagName("ul"); var itemss=items[2].getElementsByTagName("li");//获取第二个li标签 或 var div=document.getElementById('a'); var ul=div.childN

  • jQuery中slidedown与slideup方法用法示例

    这里结合实例形式总结分析了jQuery中slidedown与slideup方法用法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

  • jQuery验证插件validate使用方法详解

    jQuery验证插件validate使用方法详解

    1. 写在前面 我们知道,用户在注册的时候,会有个表单页面,然后有些选项是必填的,有些要填的内容是有规范的,这些都要在用户提交之前进行验证才行,如果不符合要求,需要在右边显示一个友好的提示,让用户修改. 记得以前在学习Servlet的时候,实现一个简单的用户注册功能的验证是在后台做的,有些用了正则表达式,有些没用,但是都比较简单.流程是这样的,前台提交表单数据后,servlet获取数据先进行验证,如果不符合要求,将提示信息放到一个List中,然后再把List存到session中,跳转到一个新的页

  • Jquery为DIV添加click事件的简单实例

    今天在做一个抽奖活动时小编要做一个抽奖没有中奖之后直接弹出一个提示,然后再给div添加一个事件了,下面我们来看这个例子的做法. html <a href="javascript:void(0);" id="click_ms" > <img src="img/bbg_08.jpg" border="0" > </a> jquery事件 $('#click_ms').click(function

  • 详解获取jq ul第一个li定位的四种解决方案

    详解获取jq ul第一个li定位的四种解决方案

    如果我们只是获取一个ul中的第一个li的话,那么我们可以这样写: $("ul li:first"); $("ul li").eq(0); $("ul li").first(); $("ul li").slice(0,1);//slice第一个参数表示的选取开始的位置,第二个参数是结束的位置 <ul> <li>安哲</li> <li>安哲</li> <li>

  • 详解C#批量插入数据到Sqlserver中的四种方式

    详解C#批量插入数据到Sqlserver中的四种方式

    本篇,我将来讲解一下在Sqlserver中批量插入数据. 先创建一个用来测试的数据库和表,为了让插入数据更快,表中主键采用的是GUID,表中没有创建任何索引.GUID必然是比自增长要快的,因为你生成一个GUID算法所花的时间肯定比你从数据表中重新查询上一条记录的ID的值然后再进行加1运算要少.而如果存在索引的情况下,每次插入记录都会进行索引重建,这是非常耗性能的.如果表中无可避免的存在索引,我们可以通过先删除索引,然后批量插入,最后再重建索引的方式来提高效率. create database C

  • 详解将数据从Laravel传送到vue的四种方式

    详解将数据从Laravel传送到vue的四种方式

    在过去的两三年里,我一直在研究同时使用 Vue 和 Laravel 的项目,在每个项目开发的开始阶段,我必须问自己 "我将如何将数据从 Laravel 传递到 Vue ?".这适用于 Vue 前端组件与 Blade 模板紧密耦合的两个应用程序,以及运行完全独立于 Laravel 后端的单页应用程序. 这里有四种不同的方法从一个到另一个获取数据. 直接回显到数据对象或组件属性中 赞成: 简单明了 反对: 必须与嵌入到 Blade 模板中的 Vue 应用程序一起使用 可以说是将数据从 La

  • 详解为什么现代系统需要一个新的编程模型

    详解为什么现代系统需要一个新的编程模型

    为什么现代系统需要一个新的编程模型? Actor模型作为一种高性能网络中的并行处理方式由Carl Hewitt几十年前提出-高性能网络环境在当时还不可用.如今,硬件和基础设施的能力已经赶上并超越了Hewitt的愿景.因此,高要求的分布式系统的建造者遇到了不能完全由传统的面向对象编程(OOP)模型解决的挑战,但这可以从Actor模型中获益. 今天,Actor模型不仅被认为是高效的解决方案--这已经被世界上要求最高的应用所检验.为了突出Actor模型解决的问题,这个主题讨论以下传统编程的假设与现代多

  • 详解如何用js实现一个网页版节拍器

    目录 引言 1. 需求分析 2. 素材准备 3. 开发实现 3.1 框架选型 3.2 模块设计 3.3 数据结构设计 3.4 播放逻辑 3.5 音频控制 3.6 动效 3.7 大屏展示 3.8 新增人声发音 4. 部署 5. 后续工作 5.1 目前存在的问题 ios声音 5.2 TODO 切换不同音效 引言 平时练尤克里里经常用到节拍器,突发奇想自己用js开发一个. 最后实现的效果如下:ahao430.github.io/metronome/. 代码见github仓库:github.com/ah

  • 详解如何使用C++写一个线程安全的单例模式

    目录 单例模式的简单实现 有问题的双重检测锁 现代C++中的解决方法 使用现代C++中的内存顺序限制 使用现代C++中的call_once方法 使用静态局部变量 单例模式的简单实现 单例模式大概是流传最为广泛的设计模式之一了.一份简单的实现代码大概是下面这个样子的: class singleton { public: static singleton* instance() { if (inst_ != nullptr) { inst_ = new singleton(); } return i

  • 详解用Docker快速搭建一个博客网站

    详解用Docker快速搭建一个博客网站

    目录 一.准备工作 二.部署流程  三.访问测试 Halo 是一款现代化的个人独立博客系统,给习惯写博客的同学多一个选择. 官网地址:https://halo.run/ 一.准备工作 本章教程基于Docker搭建,所以需要你提前在服务器上安装好Docker环境. Docker安装教程:https://www.jb51.net/article/94067.htm 二.部署流程 (1)创建工作目录 mkdir ~/.halo && cd ~/.halo (2)下载配置文件到工作目录 wget

  • 详解如何用JavaScript编写一个单元测试

    目录 为什么要进行单元测试? 范围界定和编写单元测试 保持单元测试简短而简单 考虑正面和负面的测试用例 分解长而复杂的函数 避免网络和数据库连接 如何编写单元测试 创建一个新项目 实现一个类 配置和添加我们的第一个单元测试 添加更多单元测试 修复错误 最后 测试代码是确保代码稳定的第一步.能做到这一点的最佳方法之一就是使用单元测试,确保应用程序中的每个较小的功能都按应有的方式运行——尤其是当应用程序接收到极端或无效输入,甚至可能有害的输入时. 为什么要进行单元测试? 进行单元测试有许多不同的方法

  • 详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结

    如果你发现你自己需要在 Vue 中做一次强制更新,99.9% 的情况,是你在某个地方做错了事. 1. Vue 无法检测实例被创建时不存在于 data 中的 property 原因:由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化,所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的. 场景: var vm = new Vue({ data:{}, // 页面不会变化 template: '<div>{{message}

  • 详解在spring中使用JdbcTemplate操作数据库的几种方式

    使用JdbcTemplate的步骤 1.设置spring-jdbc和spring-tx的坐标(也就是导入依赖) <dependency> <groupId>org.springframework</groupId> <artifactId>spring-jdbc</artifactId> <version>5.2.7.RELEASE</version> </dependency> <dependency&

随机推荐