JQuery дочерний селектор без родителя

Question

Я просматривал некоторый код из учебника по созданию меню карусели и заметил родительские дочерние селекторы без родительского.Никогда не видел этого раньше, и запутался в том, что он на самом деле делает.

См. Следующий код:

        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/

Answer 1

Этот селектор с контекстом:

$('> div', this)

переворачивается для использования .find() следующим образом:

$(this).find('> div')

, который с > child-selector просто:

$(this).children('div')

Другие делают ту же сделку, они могли бы использовать .children(), и на самом деле это было бы большеэффективно сделать это.

Answer 2

Существует родитель (или в данном случае scope), обратите внимание на ключевое слово this внутри селектора, это относительно элемента, к которому применяется плагин.

Селекторы jQuery позволяют вам устанавливать область видимости, и это может быть любой объект элемента jQuery.

Рассмотрим

$(".somediv").myplugin();

А внутри плагина

$("> div", this) 
is actually translated to 
$("> div", $(".somediv"))

Взгляните на один из моих вопросов, ответ довольно подробно объясняет селекторы jQuery. Какой самый быстрый метод выбора дочерних элементов в jQuery?

Answer 3

$('> div', this)

Значение this важно. Это контекстный параметр, который делает запрос равным

$(this).children('div');

См. документацию для $() для получения дополнительной информации; в нем конкретно упоминается это:

Внутри контекст селектора реализовано с помощью метода .find (), так что $('span', this) эквивалентно $(this).find('span').

$(this).find('> div') означает "div s, которые являются детьми this, что равно $(this).children('div').