2010-08-16 21 views
10

Stavo guardando un codice da un tutorial per creare un menu di carosello e ho notato i selettori figlio genitore senza il genitore. Mai visto prima, e confuso con ciò che effettivamente sta facendo.Selettore jQuery figlio senza genitore

See seguente codice:

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

risposta

3

C'è un genitore (o in questo caso uno scope), nota la parola chiave this all'interno del selettore, che è relativa all'elemento al quale il plugin viene applicato.

I selettori di jQuery consentono di impostare un ambito e può essere qualsiasi oggetto elemento jQuery.

Considerare

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

E dentro il plugin

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

Date un'occhiata a una delle mie domande, la risposta spiega un bel po 'di selettori di jQuery. What is the fastest method for selecting descendant elements in jQuery?

1
$('> div', this) 

Il this è importante. Si tratta di un parametro di contesto che rende la query pari a

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

Vedi the documentation for $() per ulteriori informazioni; menziona specificamente questo:

Internamente, contesto selettore è attuato con il metodo .find(), quindi $('span', this) equivale a $(this).find('span').

$(this).find('> div') significa "le div s che sono figli di this, che è uguale a $(this).children('div')

7

Questo selettore con un contesto:.

$('> div', this) 

ottiene ruotato intorno ad utilizzare un .find() come questo :

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

wh ich con la > child-selector è solo:

$(this).children('div') 

Gli altri stanno facendo lo stesso affare, potrebbero usare .children(), e in realtà sarebbe più efficiente di farlo.

Problemi correlati