Question

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/

Answer 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?