Дочерний селектор 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/

Ответы

Ответ 1

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

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

Рассмотрим

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

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

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

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

Ответ 2

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

$('> div', this)

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

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

который с > дочерний селектор:

$(this).children('div')

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

Ответ 3

$('> div', this)

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

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

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

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

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