Pomohl Vám můj web?
Podpořte psaní dalších článků!

jQuery-návod.cz - vše okolo jQuery - jQuery UI, pluginy a další




(13) This

Co je to this a k čemu slouží?

Klíčové slovo this slouží k zjednodušení práce s jQuery. Zastupuje elementy, které jsou vybrány nebo se jich týká určitá akce (třeba s hover). Jak this funguje, vysvětlím na následující ukázce.

$('#leve_menu a').hover(                        
 // při aktivování (třeba najetí myší) prvku "a" v levém menu
    function() {
      $(this).addClass('hover_leve_menu');      
      // se konkrétnímu prvku, nad kterým je kurzor, přidá třída
    }, function() {
      $(this).removeClass('hover_leve_menu');    
      // a při deaktivaci se třída odebere
    }
  );

This zastupuje objekt, který je právě aktivní. Bez this by bylo vše hodně složité. Nemohli bychom použít ani tento kód,

$('#leve_menu a').hover(                         
// při aktivování (třeba najetí myší) prvku "a" v levém menu
    function() {
      $("#leve_menu a").addClass('hover_leve_menu');       
      // se konkrétnímu prvku, nad kterým je kurzor, přidá třída
    }, function() {
      $("#leve_menu a").removeClass('hover_leve_menu');    
      // a při deaktivaci se třída odebere
    }
  );

protože by se kód aplikoval na všechny prvky a ne pouze na ten aktivní. Další využití je ve zjednodušení a tvorbě univerzálnějšího kódu, viz tato ukázka:

$("p").click(function(){                    
// vybereme všechny prvky "p"
         $(this).toggle(2000);              
         // a zde pouze uvedeme this
      });  

Výhoda je v tom, že když se rozhodneme změnit vybrané prvky, třeba z p na a, tak stačí přepsat první řádek a ostatní už nemusíme. Další výhoda je, že zápis je obvykle kratší a přehlednější, hlavně když vybíráme více prvků podle různých kritérií.

// příklad bez this
$("p").click(function(){                   
// vybereme všechny prvky "p"
         $("p").toggle(2000);              
         // a zde musíme znova napsat "p"
      });                                  
      // a když to pak budeme měnit, musíme vše přepisovat,
      // protože jsme nepoužili this

Zobrazit diskuzi