selector de jquery child sin padre

Question

Estaba viendo un código de un tutorial para crear un menú de carrusel y noté selectores de elementos primarios sin el padre. Nunca he visto esto antes, y confundido con lo que realmente está haciendo.

Ver siguiente código:

 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 aquí: http://jqueryfordesigners.com/jquery-infinite-carousel/

Answer 1

Hay un padre (o en este caso un scope), observe la palabra clave this dentro del selector, eso es relativo al elemento al que se está aplicando el complemento.

Los selectores de jQuery le permiten establecer un ámbito, y puede ser cualquier objeto de elemento jQuery.

Considere

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

Y dentro del plug-in

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

un vistazo a una de mis preguntas, la respuesta explica un poco acerca de los selectores de jQuery. What is the fastest method for selecting descendant elements in jQuery?

Answer 2

$('> div', this) 

El this es importante. Es un parámetro de contexto que hace la consulta igual a

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

Ver the documentation for $() para más información; se menciona específicamente esto:

Internamente, el contexto selector es implementado con el método .find(), así $('span', this) es equivalente a $(this).find('span').

$(this).find('> div') significa "los div s que son hijos de this, que es igual a $(this).children('div')

Answer 3

Este selector con un contexto:.

$('> div', this) 

consigue volteó a utilizar un .find() como esto :

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

wh ICH con el > child-selector es simplemente:

$(this).children('div') 

Los otros están haciendo la misma cosa, podrían utilizar .children(), y en realidad sería más eficiente para hacerlo.