<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. python 中 *args 和 **kwargs 的区别

    在 python 中,*args 和 **kwargs 都代表 1个 或 多个 参数的意思.*args 传入tuple 类型的无名参数,而 **kwargs 传入的参数是 dict 类型.下文举例说明 ...

  2. Docker多主机管理（八）--技术流ken

    docker多主机管理 前面我们的实验环境中只有一个 docker host,所有的容器都是运行在这一个 host 上的.但在真正的环境中会有多个 host,容器在这些 host 中启动.运行.停止和 ...

  3. 使用LR编写HTTP协议Json报文格式接口脚本实战

    最近在做HTTP协议接口压测时,遇到一些编写脚本方面的问题,在这里总结记录下,以便以后温习,也希望能帮助到和我有同样困惑的朋友吧. //实战代码如下所示:Action() { lr_start_tra ...

  4. 跨站脚本攻击xss学习

    0.认识跨站脚本 举一个跨站脚本的简单例子. 假设一个页面将用户输入的参数直接显示到页面之中.(比如有如下代码) 在实际的浏览器中,在param中提交的参数正常会展示到页面之中.比如输入下面的URL: ...

  5. Angularjs1.X进阶笔记(1)—两种不同的双向数据绑定

    一. html与Controller中的双向数据绑定 html-Controller的双向数据绑定,在开发中非常常见,也是Angularjs1.x的宣传点之一,使用中并没有太多问题. 1.1数据从ht ...

  6. IDEA写scala简单操作

    今天尝试了一下在IntelliJ IDEA里面写Scala代码,并且做到和Java代码相互调用,折腾了一下把过程记录下来. 首先需要给IntelliJ IDEA安装一下Scala的插件,在IDEA的启 ...

  7. C# 在PDF中绘制动态图章

    我们知道,动态图章,因图章中的时间.日期可以动态的生成,因而具有较强的时效性.在本篇文章中将介绍通过C#编程在PDF中绘制动态图章的方法,该方法可自动获取当前系统登录用户名.日期及时间信息并生成图章. ...

  8. 【Java】数组转List常见方式的对比

    一.最常用通过 Arrays.asList(strArray) 方式,将数组转换List后,不能对List增删,只能查改,否则抛异常. 关键代码: List list = Arrays.asList( ...

  9. 开源介绍·新款简约、实用与大气的Hexo新主题：BMW

    这是一个简约.大气.实用的Hexo新主题:BMW

  10. [HTML/CSS]colum-gap属性

    属性定义及使用说明 column-gap的属性指定的列之间的差距. 注意: 如果指定了列之间的距离规则,它会取平均值.   语法 column-gap: length|normal;   值 描述 l ...