Как работает с индексами в 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 является индексом.

Это все соответствует только .block делениям.

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().

Answer 2

На сайте JQuery есть хорошая документация с примерами использования селекторов.

• Документация по селекторам

Этот сайт полезен с примерами, и вы можете попробовать селекторы в качестве учебного упражнения.

• Примеры селекторов