<head>
<meta charset="UTF-8">
<title></title>
<style>
   li {
    display: none;
   }
</style>
</head>

<body>
<ul>

<li class="info">1</li>
  <li>2</li>
  <li class="info">3</li>
  <li class="info">4</li>
  <li>5</li>
  <li>6</li>

</ul>
<script src="jquery-3.3.1.min.js"></script>
<script>

$("li").filter(":lt(3)").show().end().filter(":gt(2)").hide()

解析：

index值从 0 开始。

:lt 选择器选取带有小于指定 index 值的元素。

:gt 选择器来选取 index 值大于指定数的元素。

// filter()  返回匹配的元素

$("li").filter(".info").show();  // 1 3 4 显示

// not()  返回不匹配的元素

$("li").not(".info").show()    // 2 5 6显示

</script>
</body>

jquery.filter() 实现元素前3个显示，其余的隐藏的更多相关文章

  1. jQuery判断当前元素显示状态并控制元素的显示与隐藏

    1.jQuery判断一个元素当前状态是显示还是隐藏 $("#id").is(':visible');   //true为显示,false为隐藏 $("#id") ...

  2. 通过jquery获得某个元素的位置, 透明div, 弹出框, 然后在旁边显示toggle子级联菜单-hover的bug解决

    jquery的"筛选选择器", 都是用冒号开头的, 即, 冒号选择器就是 筛选选择器.如: :first, :last, :eq(index), :first-child,...等 ...

  3. 转：Jquery如何获取某个元素前(后)的文本内容？

    原文:[解决]Jquery如何获取某个元素前(后)的文本内容? <span> text here... <a id="target_element">百万创 ...

  4. jquery根据(遍历)html()的内容/根据子元素的内容（元素文本）来选择（查询），在子元素前加入元素

    <ul> <li>First</li> <li>second</li> <li>third</li> </ul ...

  5. 教你三种jQuery框架实现元素显示及隐藏动画方式

    摘要:在jQuery框架中对元素对象进行显示和隐藏有三种方式,分别是"默认方式显示和隐藏"."滑动方式显示和隐藏"."淡入淡出显示和隐藏". ...

  6. jquery可见性选择器（匹配匹配所有显示的元素）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. jquery学习笔记----元素筛选

    1.eq()  筛选指定索引号的元素2.first() 筛选出第一个匹配的元素3.last() 筛选出最后一个匹配的元素4.hasClass() 检查匹配的元素是否含有指定的类5.filter() 筛 ...

  8. jQuery基础（动画篇 animate，显示隐藏，淡入淡出，下拉切换）

    1.jQuery中隐藏元素的hide方法   让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元 ...

  9. Javascript JQuery获取当前元素的兄弟元素/上一个/下一个元素（转）

    var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; //获得s的下一个 ...

随机推荐

  1. 用Scrutor来简化ASP.NET Core的DI注册

    目录 背景 Scrutor简介 Scrutor的简单使用 注册接口的实现类 注册类自身 重复注册处理策略 总结 相关文章 背景 在我们编写ASP.NET Core代码的时候,总是离不开依赖注入这东西. ...

  2. [一]class 文件浅析 .class文件格式详解 字段方法属性常量池字段 class文件属性表 数据类型 数据结构

    前言概述  本文旨在讲解class文件的整体结构信息,阅读本文后应该可以完整的了解class文件的格式以及各个部分的逻辑组成含义   class文件包含了java虚拟机指令集 和  符号表   以及若 ...

  3. Java提高班（六）反射和动态代理（JDK Proxy和Cglib）

    反射和动态代理放有一定的相关性,但单纯的说动态代理是由反射机制实现的,其实是不够全面不准确的,动态代理是一种功能行为,而它的实现方法有很多.要怎么理解以上这句话,请看下文. 一.反射 反射机制是 Ja ...

  4. 用javaweb连接数据库用javabean、severlet实现增删改查

    样 很重要的一点是建立数据库的连接 数据库是一切操作的前提 不管是增加 删除 修改 查询 都需要调用数据库连接程序 再就是java的类的编写  写完类后需要对其进行增删改查方法的 编写 这是dao层的 ...

  5. 【转载】 C#检测输入的内容中是否含有中文

    在C#开发中,可以结合正则表达式,来检测输入的内容中是否包含中文,Regex类是C#中有关正则表达式处理的相关类,功能强大,我们只需要设置好规则,即可很快检测出输入的字符串内容中是否含有中文信息. R ...

  6. C#设计模式之二十二备忘录模式（Memento Pattern）【行为型】

    一.引言 今天我们开始讲“行为型”设计模式的第十个模式,该模式是[备忘录模式],英文名称是:Memento Pattern.按老规矩,先从名称上来看看这个模式,个人的最初理解就是对某个对象的状态进行保 ...

  7. Java设计模式——适配器模式（Adapter）

    目的:把源类型适配为目标类型,以适应客户端(Client)的需求:此处我们把目标接口的调用方视为客户端 使用场景:需要对类型进行由源类型到目标类型转换的场景中 前置条件:已有客户端 //Client ...

  8. 如何高效地遍历 MongoDB 超大集合？

    GitHub 仓库:Fundebug/loop-mongodb-big-collection 本文使用的编程语言是 Node.js,连接 MongoDB 的模块用的是mongoose.但是,本文介绍的 ...

  9. JavaScript的自定义属性（事件内获得事件外的变量值）

    写轮播图点击下方圆点banBtnLi[i],切换到第i个图片banBtnLi是按钮集合,假设banBtnLi.length是4banImhLi是装图片的li,自然banImgLi.length也是4点 ...

  10. 常用weblogic搜索关键字

    NOTE:876004.1 - How to Apply WebLogic Server (WLS) Patches Using Smart Update [Video]NOTE:942815.1 - ...