jquery child selector without parent

问题:

I was looking at some code from a tutorial for creating a carousel menu and noticed parent child selectors without the parent. Never seen this before, and confused to what it is actually doing.

See following code:

        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);

Tutorial here: http://jqueryfordesigners.com/jquery-infinite-carousel/

回答1:

There is a parent(or in this case a scope), notice the this keyword inside the selector, that's relative to the element the plugin is being applied to.

jQuery's selectors allow you to set a scope, and it can be any jQuery element object.

Consider

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

And inside the plugin

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

Have a look at one of my questions, the answer explains quite a bit about jQuery's selectors. What is the fastest method for selecting descendant elements in jQuery?

回答2:

This selector with a context:

$('> div', this)

gets flipped around to use a .find() like this:

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

which with the > child-selector is just:

$(this).children('div')

The others are doing the same deal, they could use .children(), and actually it'd be more efficient to do so.

回答3:

$('> div', this)

The this is important. It's a context parameter that makes the query equal to

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

See the documentation for $() for more information; it specifically mentions this:

Internally, selector context is implemented with the .find() method, so $('span', this) is equivalent to $(this).find('span').

$(this).find('> div') means "the divs that are children of this, which is equal to $(this).children('div').