<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. javascript入门篇（二）

    对   象 对象:一组元素的集合 声明方式:字面量方式 var O = { } 构造函数方式:var obj  =  new object(); 为对象添加新属性,如:o.name = 'jerry' ...

  2. -1-7 java 网络编程基本知识点 计算机网络 TCP/IP协议栈 通信必备 tcp udp

    计算机网络 是指将地理位置不同的具有独立功能的多台计算机及其外部设备,通过通信线路连接起来, 在网络操作系统,网络管理软件及网络通信协议的管理和协调下,实现资源共享和信息传递的计算机系统. 网络编程 ...

  3. 痞子衡嵌入式：飞思卡尔i.MX RT系列MCU启动那些事（2）- Boot配置(BOOT Pin/eFUSE)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是飞思卡尔i.MX RT系列MCU的Boot配置. 在上一篇文章 Boot简介 里痞子衡为大家介绍了Boot基本原理以及i.MXRT Bo ...

  4. 痞子衡嵌入式：一表全搜罗常见移动通信标准(1-5G, GSM/GPRS/CDMA/LTE/NR...)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是移动通信标准. 移动无线网络已经成为我们生活.学习.娱乐不可缺少的必备品,而移动无线通信技术本身也在不断地更新换代.从1986年诞生第一 ...

  5. IO通信模型（一）同步阻塞模式BIO（Blocking IO）

    几个概念 阻塞IO 和非阻塞IO 这两个概念是程序级别的.主要描述的是程序请求操作系统IO操作后,如果IO资源没有准备好,那么程序该如何处理的问题:前者等待:后者继续执行(但是使用线程一直轮询,直到有 ...

  6. [日常] nginx记录post数据

    1.使用log_format指令来更改日志格式,该指令只能放在http{}段 log_format  日志名  '日志内容'; server { access_log /var/log/nginx/d ...

  7. php 使用Glob() 查找文件技巧

    定义和用法 glob() 函数返回匹配指定模式的文件名或目录. 该函数返回一个包含有匹配文件 / 目录的数组.如果出错返回 false. 参数 描述 file 必需.规定检索模式. size 可选.规 ...

  8. C# 定时器-System.Timers.Timer

    using Newtonsoft.Json; using Rafy; using Rafy.Domain; using System; using System.Collections.Generic ...

  9. mybatis基础（上）

    框架图 SqlSessionFactoryBuilder 通过SqlSessionFactoryBuilder创建会话工厂SqlSessionFactory 将SqlSessionFactoryBui ...

  10. django项目前期准备

    本文转载自 https://blog.csdn.net/xiaogeldx/article/details/89037748 Django现状 Django开发前景 Django的厉害之处 在Pyth ...