10 очень полезных функций обхода в jQuery

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

HTML

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

1. div.container — элемент-оболочка;
2. div.photo , div.title и div.rating являются прямыми дочерними элементами div.container ;
3. Каждый div.star является дочерним элементом div.rating ;
4. Когда класс div.satr включен , это полная работа .
5. .
6. Зачем траверс?

   « Почему нам нужно дополнительно уточнять ряд элементов? Это потому, что синтаксис выбора jQuery недостаточно мощный? »

   Хорошо, начнем с примера. На упомянутой выше веб-странице при нажатии на звездочку нам нужно добавить к ней и каждой звезде слева класс «on» . В то же время мы хотим изменить цвет фона всех родительских элементов звезды , поэтому наш код выглядит следующим образом:

   Во второй строке мы получаем текущий объект, на который мы нажали. Но как получить родителя звезд ? Это рейтинг div . Однако на одной странице много div.рейтингов . Какой из них мы хотим? Как получить все звезды слева от «этого» ?

   Хорошей новостью является то, что jQuery позволяет нам получать новые коллекции элементов на основе существующих коллекций на основе этих базовых отношений. И именно здесь в игру вступают функции обхода.

   1. дети

   Эта функция получает прямых дочерних элементов набора элементов.

   Это может быть очень удобно во многих ситуациях, взгляните на картинку ниже:

   1. Вначале выбираются все звезды в контейнере ;
   2. Передайте выражение выбора в Children(), чтобы сузить результаты выбора до выбранной звезды ;
   3. Если Children() принимает какие-либо параметры, будут возвращены все прямые дочерние элементы;
   4. Внучатые элементы не возвращаются.
   5. 

   $('.star').click(function(){

            $(this).addClass('on');

   //        Как выбрать родительский элемент текущего объекта ?

   //        Как получить все звезды слева от текущей звезды ?

   });