javascript - 可以过滤div中的数字范围吗？

Question

我在 html 中有七个 div，如果我首先加载 html 所有 div 在浏览器中显示。我使用 html、css 和 javascript (jquery)

<section>
  <a href="#">ALL</a> 
  <a href="#">less than 3</a>
  <a href="#">between 2 and 5</a>
  <a href="#">greater than 5</a>

</section>

<div data-filter="1">one</div>
<div data-filter="2">two</div>
<div data-filter="3">three</div>
<div data-filter="4">four</div>
<div data-filter="5">five</div>
<div data-filter="6">six</div>
<div data-filter="7">seven</div>

按照上面的代码，如果我点击全部然后所有的div显示在屏幕上，如果我点击小于3然后div只显示div 一个和两个，如果我点击大于 5，则 div 显示六和七

我的问题我是如何实现的，这可能吗？

谢谢

Answer 1

实际上，这一切都归结为了解 jQuery 的基础知识。完成此操作的一个非常简单的函数可能如下所示:

function show(start, end) {
    target = $('#target')
    on = target.children().slice(start, end)
    on.show()
    target.children().not(on).hide()
}

这是一个jsFiddle demonstrating it .