gearmobile Reading time ~4 minutes

Небольшое отступление - в одних постах я говорю о функциях jQuery, в других - о методах jQuery. Где же правильно? В принципе, и то и то правильно. И функция jQuery, и метод jQuery. Но последний вариант более правильный, поэтому в дальнейшем буду “обзывать” подобные вещи методами.

Метод 

1

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

Метод имеет один вариант использования (синтаксис):

.parent([selector])

Все очень похоже на то, как эти дела обстоят в CSS, но приведу простой пример для иллюстрации:

<nav class="test">
  <a href="#" class="test__link">test link item</a>
  <a href="#" class="test__link">test link item</a>
  <a href="#" class="test__link proba">test link item</a>
  <a href="#" class="test__link">test link item</a>
  <a href="#" class="test__link">test link item</a>
</nav>
$('.proba').siblings().addClass('selected');

… читается это так - добавить класс 

1

.selected
для всех элементов, соседних (sibling) с элементом, имеющим класс 
1

.proba
. То есть, класс 
1

.selected
будет добавлен всем элементам 
1

a
, так как они находятся на одном уровне DOM с элементом 
1

.proba
и являются соседними по отношению к нему.

По умолчанию можно не передавать методу 

1

.siblings()
аргумент в виде селектора - 
1

.siblings('a')
, так как подразумеваются элементы, которые являются соседними в текущей HTML-разметке. Но можно передавать методу в качестве аргумента имя класса - 
1

.siblings('.test__link')
; или элемент с именем класса (идентификатора) - 
1

.siblings('a.test__link')
.

Краткие примеры использования метода 

1

.siblings()
, взятые с ресурса jQuery Page2Page:

  • 1

    $("#block").siblings()
    - найдет элементы, которые имеют общего родителя с элементом, обладающим идентификатором 
    1

    #block

  • 1

    $(".lBlock").siblings()
    - найдет элементы, которые имеют общих родителей с элементами класса 
    1

    .lBlock

  • 1

    $(".lBlock").siblings(".cont")
    - найдет элементы класса 
    1

    .cont
    , которые имеют общих родителей с элементами класса 
    1

    .lBlock

Важный момент - в этом случае класс 

1

.selected
не будет добавлен к элементу 
1

.proba
. Другими словами, в методе 
1

.siblings()
к элементу, служащему в качестве критерия, не применяются действия этого метода.

Чтобы было еще понятнее, о чем идет речь, представлю ниже результат работы описанного выше javascript-кода:

<nav class="test">
  <a href="#" class="test__link selected">test link item</a>
  <a href="#" class="test__link selected">test link item</a>
  <a href="#" class="test__link proba">test link item</a>
  <a href="#" class="test__link selected">test link item</a>
  <a href="#" class="test__link selected">test link item</a>
</nav>

Метод 

1

.siblings()
прост и понятен. Единственным “подводным камнем” при работе с ним является такой момент - нужно быть внимательным с уровнями вложения элементов. Другими словами, в дереве DOM элементы не расположены на одном уровне (не являются sibling), однако разработчик упрямо пытается применить к этим элементам метод 
1

.sibling()
. И потом сильно недоумевает, почему ничего не работает, хотя код то правильный!

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

<ul class="test">
  <li class="test__item">
    <a href="#" class="test__link">test item link</a>
  </li>
  <li class="test__item">
    <a href="#" class="test__link">test item link</a>
  </li>
  <li class="test__item">
    <a href="#" class="test__link proba">test item link</a>
  </li>
  <li class="test__item">
    <a href="#" class="test__link">test item link</a>
  </li>
  <li class="test__item">
    <a href="#" class="test__link">test item link</a>
  </li>
</ul>
$('.proba').siblings().addClass('selected');

Представленный выше javascript-код работать не будет, так как элементы 

1

a
(а код был сделан в расчете на эти элементы) соседними (siblings) не являются. Это хорошо заметно, если внимательно рассмотреть HTML-код примера.

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

1

.siblings()
.

На этом все.

gearmobile Reading time ~1 minute

Два метода-антагониста, принцип работы которых ясен из имени самих методов.

Метод children

Метод 

1

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

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

  • 1

    $('div').children()
    - вернет элементы, которые лежат непосредственно внутри div-элементов
  • 1

    $('div').children('.block')
    - вернет элементы класса 
    1

    .block
    , которые лежат непосредственно внутри div-элементов
  • 1

    $('#area').children('.block') - вернет элементы класса .
    block
    1

    , которые лежат непосредственно внутри элемента с идентификатором
    #area`

Метод 

1

.children()
в чем-то похож на метод 
1

.find()
, рассмотренный мною ранее. Но между двумя этими методами существует одно большая разница.

Метод 

1

.children()
возвращает (другими словами - ищет) все элементы, расположенные на DOM-уровне ниже указанного элемента; и только на этом уровне. Другими словами - возвращаются все непосредственные children-элементы.

Метод 

1

.find()
производит поиск указанных элементов на всех уровнях DOM-дерева. Другими словами, будет производиться поиск элементов на всех уровнях, вне зависимости от глубины вложенности этих уровней.

Метод parent

Метод 

1

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

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

  • 1

    $('#block').parent()
    - вернет родителя элемента с идентификатором 
    1

    #block

  • 1

    $('div').parent()
    - вернет родительские элементы всех div-ов
  • 1

    $('div').parent('.block')
    - вернет элементы класса 
    1

    .block
    , которые являются родительскими для div-элементов на странице

На этом все.

gearmobile Reading time ~4 minutes

Достаточно интересные методы - 

1

.eq()
и 
1

.index()
, особенно в сочетании друг с другом. Поэтому и решил объединить рассмотрение этих методов. Каждый по отдельности - методы просты и мало показательны.

Но для начала вкратце (по другому и не получиться) опищу каждый из методов, по возможности своими словами.

Метод index

Работа метода 

1

.index()
проста - он возвращает индекс (порядковый номер) указанного элемента среди группы ему подобных.

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

1

.index()
также простой:

index([element])

или

.index(selector)

И пример для иллюстрации:

<ul class="test">
  <li class="primo">
    <a href="#" class="test__link">test item link</a>
  </li>
  <li class="secondo">
    <a href="#" class="test__link">test item link</a>
  </li>
  <li class="tetro">
    <a href="#" class="test__link">test item link</a>
  </li>
  <li class="quattro">
    <a href="#" class="test__link">test item link</a>
  </li>
  <li class="cinque">
    <a href="#" class="test__link">test item link</a>
  </li>
  <li class="sei">
    <a href="#" class="test__link">test item link</a>
  </li>
  <li class="sedici">
    <a href="#" class="test__link">test item link</a>
  </li>
  <li class="ten">
    <a href="#" class="test__link">test item link</a>
  </li>
</ul>

Сделать выборку всех элементов 

1

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

li
с классом 
1

.cinque
:

var listIndex = $('.cinque');
console.log('Index of ' + $('li').index(listIndex));

Найти элемент с классом 

1

.sei
среди соседних элементов и вернуть его индекс:

console.log('Index of ' + $('.sei').index());

Как видим, способы получения индекса элемента разные, а результат один.

Метод eq

Метод 

1

.eq()
прямопротивоположен методу 
1

.index()
. Этот метод возвращает элемент (как объект) по его индексу (порядковому номеру).

Если взять предыдущую HTML-разметку, то такой javascript-код:

$('li').eq(1).html("Secondo");

… изменит содержимое второго по счету элемента 

1

li
на “Secondo”. Почему второго? Как можно догадаться, результатом выборки 
1

$('li')
является массив элементов; а в массиве индексирование элементов начинается с нуля (0).

Методы eq и index

Рассмотренные выше примеры использования методов 

1

.eq()
и 
1

.index()
просты и понятны. И неинтересны.

Гораздо более интеерсным примером является случай объединения обоих методов в jQuery-цепочке.

Приведу такой гипотетический пример:

<ul class="test">
  <li class="test__item primo">
    <a href="#" class="test__link">test item link</a>
  </li>
  <li class="test__item secondo">
    <a href="#" class="test__link">test item link</a>
  </li>
  <li class="test__item tetro">
    <a href="#" class="test__link">test item link</a>
  </li>
  <li class="test__item quattro">
    <a href="#" class="test__link">test item link</a>
  </li>
  <li class="test__item cinque">
    <a href="#" class="test__link">test item link</a>
  </li>
  <li class="test__item sei">
    <a href="#" class="test__link">test item link</a>
  </li>
  <li class="test__item sedici">
    <a href="#" class="test__link">test item link</a>
  </li>
  <li class="test__item">
    <a href="#" class="test__link">test item link</a>
  </li>
</ul>
$('.test__item').click(function(){
  $('li').eq($(this).index()).html($(this).index()).siblings().html("test item link");
});

Javascript-код, написанный выше, читается таким образом:

  • сделать выборку всех элементов с классом 
    1

    .test__item
  • при клике мыши на любом из этих элементов выполнить функцию:
    • сделать выборку всех элементов 
      1

      li
    • вернуть индекс активного элемента из выборки - 
      1

      $(this).index()
    • вернуть активный элемент по его индексу - 
      1

      .eq($(this).index())
    • для возвращенного элемента 
      1

      .eq($(this).index())
      изменить его содержимое на значение его индекса - 
      1

      html($(this).index())
    • всем соседним (sibling) элементам установить значение в - 
      1

      .siblings().html("test item link")

Пример рабочий, поэтому его можно свободно попробовать.

В принципе, на этом все.

gearmobile Reading time ~3 minutes

Два очень похожих метода библиотеки jQuery, служащих для фильтрации выборки - метод 

1

.has()
и метод 
1

.hasClass()
.

И действительно, оба этих метода похожи между собой. Чтобы было понятно, лучше сразу перейду к примерам.

Метод .has()

Метод 

1

.has()
фильтрует элементы, имеющие в своем составе указанные в 
1

.has()
селекторы.

Простой пример:

$('li').has('a').addClass('active');

То есть: всем элементам 

1

li
, имеющим в качестве потомков (в своем составе) элемент 
1

a
, присвоить класс 
1

.active
.

На лицо, как бы это сказать, обратная фильтрация - справа налево. Обычно все методы библиотеки jQuery работают слева направо.

Этот метод чем-то похож на метод 

1

.parent()
. В качестве примера рассмотрим такой вариант:

$('a').parent('li').addClass('active');

… что читается таким образом: всем элементам 

1

li
, являющимся родителями элементов 
1

a
, присвоить класс 
1

.active
.

Напомню, что метод 

1

.has()
работает именно с селекторами и имеет такой синтаксис:

.has('selector')

Метод .hasClass()

Метод 

1

.hasClass()
очень похож по принципу действия на предыдущий метод 
1

has()
- но это только кажущееся впечатление.

Во-первых, как понятно из имени метода 

1

.hasClass()
, что он работает с классами, а не селекторами.

То есть, синтаксис метода 

1

.hasClass()
таков:

.hasClass('class')

Во-вторых, метод 

1

.hasClass()
возвращает логическое 
1

true
или 
1

false
, в отличие от метода 
1

.has()
, который возвращает массив объектов, доступных для дальнейшей обработки.

Простой пример:

if ($('li').hasClass('active')) {
  $('li').find('a').addClass('activeLink');
} else {
  $('li').find('a').addClass('inactiveLink');
}

… что читается таким образом: если элементы 

1

li
имеют класс 
1

.active
, то всем элементам 
1

a
, являющимся потомками элементов 
1

li
, присвоить класс 
1

.activeLink
; иначе всем элементам 
1

a
присвоить класс 
1

.inactiveLink
.

Стоит обратить внимание, что в случае метода 

1

.hasClass()
имеет место быть обычный способ фильтрации элементов - слева направо; выборка сужается по мере появления новых условий.

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

1

.has()
и 
1

.hasClass
.

На этом все.

gearmobile Reading time ~3 minutes

Осуществляет поиск элементов внутри уже выбранных элементов.

Метод имеет варианты использования и соответствующий синтаксис:

1

.find(selector)
- ищет элементы, соответствующие заданному селектору, внутри выбранных элементов.

1

.find(element)
- осуществляет поиск элемента 
1

element
внутри выбранных элементов. Параметр 
1

element
задается в виде DOM-элемента.

1

.find(jQuery object)
- осуществляет поиск элементов внутри выбранных элементов, оставляя те, которые содержатся в заданном объекте jQuery.

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

  • вернет все элементы 
    1

    span
    , находящиеся внутри div-элементов:
$('div').find('span')
  • вернет все элементы с классом 
    1

    .bigBlock
    , находящиеся внутри div-элементов:
$('div').find('.bigBlock')

Вышеуказанные примеры хороши лишь в качестве демонстрации возможностей метода 

1

.find()
.

Например, искать span-элементы, лежащие внутри div’ов правильнее будет так:

$('div span')

Метод 

1

.find()
же удобно использовать, когда некоторые элементы уже найдены и необходимо осуществить поиск других элементов внутри уже найденных элементов:

// найдем все ul-элементы на странице
var $ulElements = $('ul');
// найдем li-элементы с классом .userBox внутри $ulElements
$ulElements.find('li.userBox');

// сокращенный вариант записи
var $ulElements = $('ul').find('li.userBox');

Так же 

1

.find()
удобен для использования в цепочках методов:

$('ul') // найдем все ul-элементы на странице
  .addClass('listElements') // добавим ul'ам класс .listElements
  .find('li.userBox') // найдем li-элементы с классом .userBox внутри ul'ов
  .remove(); // и удалим их

// сокращенный вариант записи
$('ul').addClass('listElements').find('li.userBox').remove();

Работа метода 

1

.find()
схожа с методом 
1

.children()
, который осуществляет поиск подходящих дочерних элементов.

Отличие заключается в том, что 

1

.find()
проводит поиск не только среди дочерних элементов, но и внутри них тоже (другими словами - поиск проходит на всех уровнях иерархии DOM, в то время как 
1

.children()
ищет только на одном уровне).

Пример метода .find()

Внутри каждого ul-элемента найдем первый li-элемент и последний p-элемент:

// найдем и сохраним все ul-элементы
var $matched = $('ul');

// выделим их
$matched.addClass('matched');

// найдем внутри уже выбранных элементов все требуемые и выделим их, добавив класс .result
$matched.find('li:first, p:last').addClass('result');

// сокращенный вариант записи
var $matched = $('ul').addClass('matched').find('li:first, p:last').addClass('result');

Фильтрация элементов помощью .find()

Кроме поиска, .find() может осуществлять своеобразную фильтрацию.

var $span = $('span'); // создать переменную $span и поместить в нее результат выборки по элементам span
$('p').find($span).css('color','blue'); // найти все элементы p, среди этих найденных элементов найти все элементы span и расскрасить их

Материал статьи полностью основан на http://jquery.page2page.ru и не претендует на оригинальность.