<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. [二]Java虚拟机 jvm内存结构 运行时数据内存 class文件与jvm内存结构的映射 jvm数据类型 虚拟机栈 方法区 堆 含义

    前言简介 class文件是源代码经过编译后的一种平台中立的格式 里面包含了虚拟机运行所需要的所有信息,相当于 JVM的机器语言 JVM全称是Java Virtual Machine  ,既然是虚拟机, ...

  2. 最近一年语义SLAM有哪些代表性工作？

    点击"计算机视觉life"关注,置顶更快接收消息! 本文由作者刘骁授权发布,转载请联系原作者,个人主页http://www.liuxiao.org 目前 Semantic SLAM ...

  3. [心得] SQL Server Partition(表分區) 資料分佈探討

    最近在群裡有個朋友問了個問題是這樣的 用户表有一千多万行,主键是用户ID,我做了分区.但经常查询时,其它的表根据用户ID来关联,这样跨区查询,reads非常高.有什么好的处理办法?不分区的话,索引维护 ...

  4. C#反射与特性使用简介

    本文是学习特性与反射的学习笔记,在介绍完特性和反射之后,会使用特性与反射实现一个简单的将DataTable转换为List的功能,水平有限,如有错误,还请大神不吝赐教. 1.      反射:什么是反射 ...

  5. [PHP] 适配器模式的日常使用

    适配器模式就是将一个类的接口方法转换成我希望用的另一个方法 , 下面是个常见的用处 class Session{ public $mc; public function __construct(){ ...

  6. 设计模式之Factory工厂模式的好处

    最最直观的好处就是吹牛逼,看着要比普通创建对象要屌 好看 一般情况下,我们创建对象使用的是new. Sample sample=new Sample(); 然而,实际情况会比这样复杂的多,比如说 Sa ...

  7. Linux文件系统的基本结构

    Linux文件系统结构 通过下面两张图片来认识一下Linux文件系统的结构. 当前工作目录 实践: 文件名称 这些规则不仅适用于文件,也适用于文件夹. 实践: ls命令 ls命令表示列出当前工作目录的 ...

  8. JavaScript-数字和字符串比较大小

    JavaScript经常会比较字符串的大小,有的时候容易混淆,因此简单的梳理一下JavaScript字符串的比较: //1.数字比较 console.log('数字比较:' + (12 < 3) ...

  9. finereport报表--动态格间运算 二

    报表输出

  10. MS SQL自定义函数判断是否正整数

    可以写一个函数: 主要是使用正则来判断.另外输入字符是空的话,使用"-"来替换. CREATE FUNCTION [dbo].[svf_NonNegativeInteger] ( ...