如何在jQuery中使用索引？

Question

我们有html代码,如:

<div class="blocks">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>

如何得到:

1)前五个要素？

2)可见块的数量(它们可以是不可见的).

3)所有元素的数量？

4)隐形元素的数量？

5)制作可见元素(n)？

6)使来自不可见元素n到n？

n 是一个索引号.

这一切都只对应于.blockdiv.

Answer 1

1)前五个要素？

$('.block:lt("5")'); // zero-based indexing.

2)可见块的数量(它们可以是不可见的).

$('.block:visible').length; // gets all visible '.block' elements.

$('.block:visible:lt("5")'); // the first five elements
$('.block:visible:gt("2")'); // all elements after the third (zero-based indexing)

3)所有元素的数量？

$('.block').length;

4)隐形元素的数量？

$('.block').not(':visible');
$('.block:hidden'); // thanks @strager

5)制作可见元素(n)？

$('.block').eq(n).show();

6)从n到n制作不可见元素？

$('.block').each(
    function(i){
    var lowBound = 2, highBound = 10;
        if (i > lowBound && i < highBound) {
            $(this).hide();
        }
     });

$('.block').slice(low, high).hide(); // use this approach, it's much better! Thanks, again, @strager

参考文献:

• lt().
• gt().
• not().
• eq().
• show().
• each().
• index().