gearmobile Reading time ~2 minutes

В библиотеке jQuery имется возможность использования области применения селекторов, с помощью контекста.

Что такое контекст в jQuery? Давайте рассмотрим “стандартную” запись кода на JavaScript(jQuery):

$('li').addClass('someClass');

Видим в этом коде, что функции 

1

$()
передается один аргумент - в данном случае это селектор 
1

li
. В качестве селектора может быть фрагмент разметки, имя класса или имя идентификатора. Но - в 90% случаев функции 
1

$()
 передается один аргумент.

Однако это не является правилом. И функции 

1

$()
можно передавать не один, а два аргумента.

В этом случае второй аргумент является контекстом и служит для указания области дерева DOM, внутри которой необходимо осуществлять поиск.

То есть, запись вида:

$('li').addClass('someClass');

… говорит - найти все элементы 

1

li
во всем дереве DOM. Другими словами, отсутствие второго аргумента подразумевает область применения селекторов - все дерево DOM.

А вот запись вида:

$('li','#primo').addClass('block__item--first');

… говорит, что нужно найти все селекторы 

1

li
внутри элемента с идентификатором 
1

#primo
. Другими словами, идентификатор 
1

#primo
 ограничивает область применения (или область видимости - как больше нравиться) селектора 
1

li
.

Можно слегка усложнить область видимости селекторов - указать не одну область, а две области:

$('li','#primo,#tetro').addClass('block__item--first');

… в этом случае будут возвращены только те элементы 

1

li
, которые находятся внутри блока с идентификатором 
1

#primo
 и внутри блока с идентификатором 
1

#tetro
. Другими словами, были заданы две области видимости для селектора 
1

li
.

В качестве второго аргумента (контекста) функции 

1

$()
может быть передан не только селектор, имя класса или имя идентификатора (как в рассмотренном выше случае).

Контекстом может быть результат работы другой функции! То есть, можно одной функции выборки передавать результат выборки другой функции!

Например, таким гипотетическим образом:

$('a',$('#primo > li')).addClass('block__link--decor');

На этом все.

gearmobile Reading time ~4 minutes

Достаточно интересный (для меня) метод выборки элементов из коллекции - метод 

1

.slice()
. Хотя чего-то эдакого в этом методе нет совсем.

Просто этот метод позволяет установить диапазон (область), по которому (внутри которой) будут выбираться элементы.

Синтаксис метода 

1

.slice()
таков:

.slice(start,[end])

Возвращает элементы с индексами от 

1

start
до 
1

end
, если последний задан или до конца, если параметр 
1

end
 опущен.

Элементы с индексом 

1

start
включаются в результат, а 
1

end
 - нет (т.е. 
1

.slice(3,5)
 вернет элементы, идущие под индексом 3 и 4, элемент с индексом 5 включен не будет).

Кроме этого, параметры могут быть заданы в форме отрицательных чисел, в таком случае, отсчет элементов идет с конца набора: 

1

-1
– последний элемент, 
1

-2
 – предпоследний элемент и т. д.

Примеры использования:

1

$("div").slice(3)
- вернет все div-элементы, начиная с четвертого (с индексами 3, 4, …) 
1

$("div").slice(3, 5)
 - вернет div-элементы с индексами 3 и 4 
1

$("div").slice(-4, -2)
 - вернет div-элементы, идущие четвертым и третьим с конца 
1

$("div").slice(-2)
 - вернет предпоследний и последний div-элементы на странице

Приведу пример HTML-разметки:

<ul class="test">
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
</ul>

Такой javascript-код:

$(function(){
  var list = $('.test');
  list.find('li').slice(2,10).addClass('test__link--sliced');
});

… выполнит следующее:

  • создаст переменную 
    1

    list
     и поместит в нее результат выборки - 
    1

    $('.test')
  • найдет в переменной 
    1

    list
     все элементы 
    1

    li
     - 
    1

    .find('li')
  • в найденной коллекции определит диапазон элементов 
    1

    li
     с индексами с 2-го по 10-й - 
    1

    .slice(2,10)
  • добавит к элементам 
    1

    li
     этого диапазона класс - 
    1

    .addClass('test__link--sliced')
  • но не добавит класс 
    1

    .test__link--sliced
     к элементу 
    1

    li
     с индексом 10!

Результатом выполнения показанного выше js-кода будет такая HTML-разметка:

<ul class="test">
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item test__link--sliced"></li>
  <li class="test__item test__link--sliced"></li>
  <li class="test__item test__link--sliced"></li>
  <li class="test__item test__link--sliced"></li>
  <li class="test__item test__link--sliced"></li>
  <li class="test__item test__link--sliced"></li>
  <li class="test__item test__link--sliced"></li>
  <li class="test__item test__link--sliced"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
</ul>

Обратите внимание, что нумерация элементов начинается с 

1

0
- это индекс элемента! Элемент с последним индексом не включен в выборку!

Еще один пример, более краткий и наглядный.

Начальный HTML-код:

<ul class="bad">
  <li class="bad__item"></li>
  <li class="bad__item"></li>
  <li class="bad__item"></li>
  <li class="bad__item"></li>
  <li class="bad__item"></li>
  <li class="bad__item"></li>
  <li class="bad__item"></li>
</ul>

JavaScript-код:

$(function(){
  var bad = $('.bad');
  bad.find('li').slice(2,4).addClass('bad__item--sliced');
});

Результат:

<ul class="bad">
  <li class="bad__item"></li>
  <li class="bad__item"></li>
  <li class="bad__item bad__item--sliced"></li>
  <li class="bad__item bad__item--sliced"></li>
  <li class="bad__item"></li>
  <li class="bad__item"></li>
  <li class="bad__item"></li>
</ul>

На этом все. Материал частично основан на ресурсе jquery.page2page и не претендует на оригинальность.

gearmobile Reading time ~4 minutes

Этот метод очень похож на то, как это дело обстоит в CSS. С помощью него можно выбрать любой элемент в коллекции ему подобных, если они имеют одного общего родителя.

Приведу пример HTML-разметки, над которой буду тренироваться:

<ul class="test">
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
</ul>

И начну учиться выбирать элементы из такого списка с помощью метода 

1

.nth-child()
.

nth-child(even) и nth-child(odd)

Такой пример javascript-кода:

$(function(){
  var list = $('.test');
  list.find('li:nth-child(even)').addClass('test__item--right');
  list.find('li:nth-child(odd)').addClass('test__item--left');
});

… этот javascript-код читается так:

  • создать переменную 
    1

    list
     и поместить в нее результат выборки 
    1

    $('.test')
  • в переменной 
    1

    list
     найти все четные (even) элементы 
    1

    li
     - 
    1

    .find('li:nth-child(even)')
  • и присвоить этим элементам 
    1

    li
     класс - 
    1

    .addClass('test__item--right')
<ul class="test">
  <li class="test__item"></li>
  <li class="test__item test__item--right"></li>
  <li class="test__item"></li>
  <li class="test__item test__item--right"></li>
  <li class="test__item"></li>
  <li class="test__item test__item--right"></li>
  <li class="test__item"></li>
  <li class="test__item test__item--right"></li>
  <li class="test__item"></li>
  <li class="test__item test__item--right"></li>
  <li class="test__item"></li>
  <li class="test__item test__item--right"></li>
</ul>

… затем:

  • в переменной 
    1

    list
     найти все нечетные (odd) элементы 
    1

    li
     - 
    1

    .find('li:nth-child(odd)')
  • и присвоить этим элементам 
    1

    li
     класс - 
    1

    .addClass('test__item--left')
<ul class="test">
  <li class="test__item test__item--left"></li>
  <li class="test__item"></li>
  <li class="test__item test__item--left"></li>
  <li class="test__item"></li>
  <li class="test__item test__item--left"></li>
  <li class="test__item"></li>
  <li class="test__item test__item--left"></li>
  <li class="test__item"></li>
  <li class="test__item test__item--left"></li>
  <li class="test__item"></li>
  <li class="test__item test__item--left"></li>
  <li class="test__item"></li>
</ul>

Как видим, все просто и в точности также, как это обстоит в CSS с его селектором 

1

nth-child
.

nth-child(pattern)

Такой пример javascript-кода:

$(function(){
  var list = $('.test');
  list.find('li:nth-child(2)').addClass('test__link--capitalize');
  list.find('li:nth-child(11)').addClass('test__link--uppercase');
});
  • найдет второй элемент 
    1

    li
     из коллекции - 
    1

    .find('li:nth-child(2)')
  • и присвоить ему класс - 
    1

    .addClass('test__link--capitalize')
  • найдет 11-й элемент 
    1

    li
     из коллекции - 
    1

    .find('li:nth-child(11)')
  • и присвоить ему класс - 
    1

    .addClass('test__link--uppercase')
<ul class="test">
  <li class="test__item"></li>
  <li class="test__item test__link--capitalize"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item test__link--uppercase"></li>
  <li class="test__item"></li>
</ul>

Заключение

Вот и все, что можно сказать о методе 

1

nth-child
библиотеки jQuery.

Но чуть не забыл упомянуть такой важный момент! Как уже можно было заметить, нумерация при использовании метода 

1

nth-child
начинается не с 0, а с 1!

Впрочем, точно также обстоят дела и с селектором 

1

nth-child
в CSS.

На этом все.

gearmobile Reading time ~5 minutes

Рассмотрю два метода, которые похожи внешне и внутренне, как может показаться с первого взгляда. Однако, между ними есть тонкая разница.

Метод first

Метод 

1

first()
призван возращать первый элемент из коллекции (выборки) этих элементов. Как всегда, чтобы не быть голословным и иметь наглядный пример перед глазами, приведу ниже HTML-разметку, на которой буду тренироваться:

<div class="wrapper">
  <ul id="primo" class="block">
    <li class="block__item"></li>
    <li class="block__item"></li>
    <li class="block__item"></li>
  </ul>
  <ul class="block">
    <li class="block__item"></li>
    <li class="block__item"></li>
    <li class="block__item"></li>
  </ul>
  <ul class="block">
    <li class="block__item"></li>
    <li class="block__item"></li>
    <li class="block__item"></li>
  </ul>
  <ul class="block">
    <li class="block__item"></li>
    <li class="block__item"></li>
    <li class="block__item"></li>
  </ul>
</div>

Вот такая большая разметка 

1

div class="wrapper"
с четырьмя блоками 
1

ul class="block"
, у каждого из которых есть элементы-потомки 
1

li class="block__item"
.

И создам небольшой скрипт на JS/jQuery такого плана:

$(function(){
  var wrapper = $('.wrapper');
  wrapper.find('li:first').addClass('block__item--firstSimple');
});

Работа вышеприведенного js-кода будет сводиться к следующему:

  • создается переменная 
    1

    wrapper
    , в которую помещается результат выборки 
    1

    $('.wrapper')
  • в переменной 
    1

    wrapper
     находим элемент 
    1

    li
    , который является первым в коллекции - 
    1

    .find('li:first')
  • этому элементу добавляется класс - 
    1

    .addClass('block__item--firstSimple')

Код несложный и вроде бы все понятно. Но вот вопрос - а какой элемент 

1

li
с точки зрения данного кода является первым в коллекции?

Чтобы не ломать понапрасну голову, приведу сразу ответ:

<div class="wrapper">
  <ul id="primo" class="block">
    <li class="block__item block__item--firstSimple"></li>
    <li class="block__item"></li>
    <li class="block__item"></li>
  </ul>
  <ul class="block">
    <li class="block__item"></li>
    <li class="block__item"></li>
    <li class="block__item"></li>
  </ul>
  <ul class="block">
    <li class="block__item"></li>
    <li class="block__item"></li>
    <li class="block__item"></li>
  </ul>
  <ul class="block">
    <li class="block__item"></li>
    <li class="block__item"></li>
    <li class="block__item"></li>
  </ul>
</div>

Вот так - только он один и только этот элемент является первым в коллекции элементов 

1

li
.

Это объяснимо, если слегка подумать. В переменной 

1

wrapper
хранится коллекция элементов; и элементов 
1

li
 - в том числе.

Коллекция элементов - это не что иное, как массив. А в массиве только один элемент может быть первым. То есть, иметь индекс 0.

Именно поэтому метод 

1

.first()
- это всего лишь синоним (alias) другого, более универсального метода 
1

.eq()
 и может быть записан таким способом - 
1

.eq(0)
 - вернуть элемент с нулевым индексом, то есть - первый элемент массива.

Антагонистом метода 

1

.first()
является метод 
1

last()
, который возвращает последний элемент массива. И метод 
1

.last()
 также можно записать по другому - 
1

.eq(-1)
; это также вернет последний элемент массива.

Ок, с методом 

1

.first()
вроде разобрались. Двигаемся дальше и рассмотрим метод 
1

.first-child()
.

Метод first-child()

Казалось бы, в чем разница? Трудно догадаться, поэтому сразу приведу js-код с описанием работы. В качестве подопытной HTML-разметки будет выступать все та же, приведенная в самом начале статьи.

$(function(){
  var wrapper = $('.wrapper');
  wrapper.find('li:first-child').addClass('block__item--firstChild');
});

Что делает приведенный выше код? А вот что:

  • создает переменную 
    1

    wrapper
     и присваивает ей значение выборки - $(‘.wrapper’)
  • в переменной 
    1

    wrapper
     находим первый элемент 
    1

    li
     - 
    1

    .find('li:first-child')
  • этому элементу присваивается класс - 
    1

    .addClass('block__item--firstChild')

Все просто и вроде бы точно также, как и в случае с методом 

1

.first()
. Вроде бы да, но возникает вопрос - а какой элемент 
1

li
 данный код считает первым в данном случае?

Чтобы не гадать, снова приведу готовый ответ:

<div class="wrapper">
  <ul id="primo" class="block">
    <li class="block__item block__item--firstChild"></li>
    <li class="block__item"></li>
    <li class="block__item"></li>
  </ul>
  <ul class="block">
    <li class="block__item block__item--firstChild"></li>
    <li class="block__item"></li>
    <li class="block__item"></li>
  </ul>
  <ul class="block">
    <li class="block__item block__item--firstChild"></li>
    <li class="block__item"></li>
    <li class="block__item"></li>
  </ul>
  <ul class="block">
    <li class="block__item block__item--firstChild"></li>
    <li class="block__item"></li>
    <li class="block__item"></li>
  </ul>
</div>

Вот она - разница в подходе отбора первого элемента. Другими словами, метод 

1

.first-child()
находит все элементы, которые являются первыми потомками у своих непосредственных родителей. А в данном случае таких потомков насчиталось аж 4 штуки.

Конечно, можно провести аналогию и рассмотреть метод 

1

.last-child()
. Но мне кажется, смысла в этом особого нет - все и так понятно. Выборка будет производиться с точностью до наоборот и будут отбираться последние потомки своих неспосредственных родителей.

На этом думаю закончить сравнительный обзор двух методов - 

1

.first()
и 
1

.first-child()
.

gearmobile Reading time ~8 minutes

Рассмотрю методы для нахождения следующих и предыдущих элементов из выборки. Предполагается, что имеется группа элементов, у которых один родитель.

Чтобы не ходить вокруг да около, приведу пример HTML-разметки:

<ul class="test">
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
</ul>

Видно, что у элемента-родителя 

1

ul class="test"
имеется двенадцать элементов-потомков 
1

li class="test__item"
.

Так вот, в библиотеке jQuery имеются несколько методов, с помощью которых можно “погулять” по этому DOM-дереву. Расссмотрю каждый из них в отдельности.

Но стоит сразу сказать - как всегда, эти методы очень краткие и предельно понятные. Вся “прелесть” начинается, когда методы объединяют в jQuery-цепочку.

Метод next()

С помощью этого метода возвращается элемент, находящий следующим по отношению к текущему элементу.

Приведу такой JS-код:

$(function(){
  var list = $('.test');
  list.find('li').eq(6).next().addClass('test__link--nexted');
});

… который выполняет следующее:

  • создать переменную 
    1

    list
     и поместить в нее результат выборки 
    1

    $('.test')
  • в переменной 
    1

    list
     найти все элементы 
    1

    li
  • вернуть элемент 
    1

    li
     с индексом 6 - 
    1

    .eq(6)
  • найти следующий за ним элемент 
    1

    li
  • присвоить ему класс 
    1

    .test__link--nexted

В результате выполнения этого кода класс 

1

.test__link--nexted
будет присвоен элементу 
1

li
 с индексом 7 (или восьмому - по счету):

<ul class="test">
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item test__link--nexted"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
</ul>

Метод prev()

Этот метод абсолютно аналогичен методу 

1

next()
за тем исключением, что его действие направлено в противоположную сторону. Метод 
1

prev()
 возвращает элемент, который предшествует текущему элементу.

То есть, такой JS-код:

$(function(){
  var list = $('.test');
  list.find('li').eq(6).prev().addClass('test__link--preved');
});
  • создаст переменную 
    1

    list
     и поместит в нее результат выборки 
    1

    $('.test')
  • в переменной 
    1

    list
     найдет все элементы 
    1

    li
  • вернет элемент 
    1

    li
     с индексом 6 - 
    1

    .eq(6)
  • найдет предшествующий ему элемент 
    1

    li
  • присвоит ему класс 
    1

    .test__link--preved

Результатом выполнения этого кода класс 

1

.test__link--preved
будет присвоен элементу 
1

li
 с индексом 5 (или шестому - по счету):

<ul class="test">
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item test__link--preved"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
</ul>

Краткое заключение

Обобщением вышесказанного является такое предложение. Методы 

1

next()
и 
1

prev()
 возвращают один элемент, который является следующим или предшествует текущему элементу. Все элементы имеют одного общего родителя и поиск осуществляется только в этих рамках (другими словами - это sibling-элементы).

Методы nextAll() и prevAll()

Производными от рассмотренных мною выше методов 

1

next()
и 
1

prev()
 являются методы 
1

nextAll()
 и 
1

prevAll()
. Фактически, это те же самые методы 
1

next()
 и 
1

prev()
, но в этих методах возвращается не один элемент, а все оставшиеся элементы, которые являются sibling по отношению к текущему элементу.

То есть, такой JS-код:

$(function(){
  var list = $('.test');
  list.find('li').eq(3).nextAll().addClass('block__item--squared');
});
  • создаст переменную 
    1

    list
     и поместит в нее результат выборки 
    1

    $('.test')
  • в переменной 
    1

    list
     найдет все элементы 
    1

    li
  • вернет элемент 
    1

    li
     с индексом 3 - 
    1

    .eq(3)
  • найдет все следующие за ним элементы 
    1

    li
     - 
    1

    .nextAll()
  • присвоит всем найденным элементам 
    1

    li
     класс 
    1

    .block__item--squared

Результатом будет такой HTML-код:

<ul class="test">
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item block__item--squared"></li>
  <li class="test__item block__item--squared"></li>
  <li class="test__item block__item--squared"></li>
  <li class="test__item block__item--squared"></li>
  <li class="test__item block__item--squared"></li>
  <li class="test__item block__item--squared"></li>
  <li class="test__item block__item--squared"></li>
  <li class="test__item block__item--squared"></li>
</ul>

Метод 

1

prevAll()
работает аналогично, но “в другую сторону”. Этот метод возвращает все элементы, которые предшествуют текущему элементу.

То есть, такой JS-код:

$(function(){
  var list = $('.test');
  list.find('li').eq(3).prevAll().addClass('block__item--circled');
});
  • создаст переменную 
    1

    list
     и поместит в нее результат выборки 
    1

    $('.test')
  • в переменной 
    1

    list
     найдет все элементы 
    1

    li
  • вернет элемент 
    1

    li
     с индексом 3 - 
    1

    .eq(3)
  • найдет все элементы 
    1

    li
    , которые предшествуют ему - 
    1

    .prevAll()
  • присвоит всем найденным элементам 
    1

    li
     класс 
    1

    .block__item--circled

Результатом работы этого js-скрипта будет такой HTML-код:

<ul class="test">
  <li class="test__item block__item--circled"></li>
  <li class="test__item block__item--circled"></li>
  <li class="test__item block__item--circled"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
  <li class="test__item"></li>
</ul>

Общее заключение

Вывод по методам 

1

nextAll()
и 
1

prevAll()
. Эти методы работают с sibling-элементами, то есть - имеющими одного родителя. Эти методы возвращают все найденные элементы, которые предшествуют или расположены после текущего элемента.

Методы 

1

nextAll()
и 
1

prevAll()
 очень похожи также на рассмотренный мною в предыдущей статье метод 
1

siblings
. Вот только действие метода 
1

siblings
 более “тупое” (если позволительно так сказать) - этот метод “фигачит” свое действие сразу в обе стороны от текущего элемента, по принципу - “от забора и до обеда”.

Методы 

1

nextAll()
и 
1

prevAll()
 более “интеллектуальные” - они “фигачат” свое действие только в одну сторону - указанную.

Ну, а методы 

1

next()
и 
1

prev()
 самые “умные” - “только один элемент, который ближайший и слева”; “только один элемент, который ближайший и справа”.

На этом все.