Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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/

like image 629
Ryan Sampson Avatar asked Aug 16 '10 22:08

Ryan Sampson


People also ask

How to select a child element in jQuery?

children() is an inbuilt method in jQuery which is used to find all the children element related to that selected element. This children() method in jQuery traverse down to a single level of the selected element and return all elements. Here selector is the selected element whose children are going to be found.

How to select parent to child in jQuery?

The ("parent > child") selector selects all elements that are a direct child of the specified element.

What is nth child in jQuery?

Projects In JavaScript & JQuery The :nth-child() selector in jQuery is used to select all elements that are the nth child, regardless of type, of their parent.

How do you select child elements in CSS?

The child combinator ( > ) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first. Elements matched by the second selector must be the immediate children of the elements matched by the first selector.


3 Answers

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.

like image 81
Nick Craver Avatar answered Nov 13 '22 22:11

Nick Craver


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?

like image 24
Marko Avatar answered Nov 13 '22 22:11

Marko


$('> 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').

like image 30
MvanGeest Avatar answered Nov 13 '22 21:11

MvanGeest