Элегантный способ доступа JQuery селектор

Question

Допустим, у меня есть HTLM так:

<ul id="citylist"> 
    <li>Seoul</li> 
    <li>Brisbane</li> 
    <li>Busan</li> 
</ul> 

Если я хочу связать событие щелчка к <li> элементов, я хотел бы написать JavaScript, как это:

var $cityList = $('#citylist'); 

$cityList.delegate('li', 'click', function() { 
    //.. I want to access to $cityList 
}); 

Если я хочу получить доступ к селектору из функции внутреннего обработчика, есть ли какой-либо элегантный способ доступа к $cityList без использования $cityList?

Update

я сделал какую-то ошибку, делая пример. Мне пришлось привязать события к <li>.

Answer 1

Если вы абсолютно не хотите получить доступ к $cityList вы можете использовать .closest()

var $cityList = $('#citylist'); 

$cityList.delegate('li', 'click', function() { 
    console.log($(this).closest('#citylist')); 
}); 

Или вы можете обернуть функцию обратного вызова, как это (и передать $citylist):

var $cityList = $('#citylist'); 

$cityList.delegate('li', 'click', (function (parent) { 
    return function() { 
    // parent will be $citylist, this will be the li 
    console.log(arguments, evt, this, parent); 
    }; 
})($cityList)); 

Answer 2

var $cityList = $('#citylist'); 

$cityList.find('li').click(function() { 
    // click event handler 
}); 

Вы можете абсолютно и эффективно использовать $ cityList в функции обработчика.

Answer 3

Опасайтесь, что вы не привязываетесь click() к li элементам, а к элементу ul.

Это связывается с li элементов:

$('#citylist li').click(function() { 
    // code here 
}); 

Если вы хотите просто связать прямые потомки #citylist использования этого:

$('#citylist > li').click(function() { 
    // code here 
}); 

Answer 4

Javascript имеет закрытия, так что если вы сделаете это:

var $cityList = $('#citylist'); 

$cityList.children().click(function() { 
    // you can already access $cityList like this: 
    $cityList.myFunction(); 
}); 

Answer 5

Я думаю, что один из лучших способов связать то, что вы хотите, и зе селектор вы ищете:

$('li', 'ul#citylist').bind('click', function() 
{ 
    if($(this).parent().is('ul#citylist')) alert('I am #citylist!'); 
}); 

С $ («Ли», «уль # CityList») вы говорите JQuery элемент, который вы хотите выбрать и его родителя, таким образом, JQuery будет найти быстрее элемент, который вы хотите выбрать (селектор в jQuery всегда имеет 2 параметра, но последний, родительский селектор, обычно забывается).

Чтобы выбрать #citylist изнутри события вы только должны Reffer родителя элемента, инициировавшего событие ($ (это))

Надеется, что это помогает

Answer 6

Вы можете сделать это через модифицирующих контекст обработчика

var $cityList = $('#citylist'); 

$cityList.delegate('li', 'click', $.proxy(function(event) { 
    console.log(event.currentTarget, this.parentObj, this.parentObj.selector); 
}, $.extend(this, { 
    parentObj: $cityList 
}))); 

примера на jsfiddle