JQuery дочерний селектор без родителя
Я искал некоторый код из учебника по созданию меню карусели и заметил родительские дочерние селекторы без родительского. Никогда не видел этого раньше, и запутался в том, что он на самом деле делает.
См. Следующий код:
var $wrapper = $('> div', this).css('overflow', 'hidden'),
$slider = $wrapper.find('> ul'),
$items = $slider.find('> li'),
$single = $items.filter(':first'),
singleWidth = $single.outerWidth(),
visible = Math.ceil($wrapper.innerWidth() / singleWidth), // note: doesn't include padding or border
currentPage = 1,
pages = Math.ceil($items.length / visible);
Учебное пособие здесь: http://jqueryfordesigners.com/jquery-infinite-carousel/
3 ответа
Есть родитель (или в данном случае scope), обратите внимание на ключевое слово this внутри селектора, это относительно элемента, к которому применяется плагин.
Селекторы jQuery позволяют задать область видимости, и это может быть любой объект элемента jQuery.
Рассмотрим
$(".somediv").myplugin();
И внутри плагина
$("> div", this)
is actually translated to
$("> div", $(".somediv"))
Взгляните на один из моих вопросов, ответ на который объясняет довольно много о селекторах jQuery. Какой самый быстрый метод выбора элементов-потомков в jQuery?
Этот селектор с контекстом:
$('> div', this)
переворачивается, чтобы использовать .find () следующим образом:
$(this).find('> div')
который с > child-selector просто:
$(this).children('div')
Остальные делают то же самое, они могли бы использовать .children () , и на самом деле это было бы более эффективно.
$('> div', this)
Этот важен. Это параметр контекста, который делает запрос равным
$(this).children('div');
См. документацию для $ () для получения дополнительной информации; в нем конкретно упоминается следующее:
Внутренний контекст селектора реализовано с помощью метода .find (), поэтому
$ ('span', this)эквивалентно$ (this) .find ('диапазон').
$ (this) .find ('> div') означает « div , которые являются дочерними для this , что равно $ ( это) .children ('div') .