Question

假设我有这样的HTLM：

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

如果我想将click事件绑定到<li>元素，我会像这样编写JavaScript：

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

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

如果我想从处理函数内部访问选择器，有没有优雅的方法可以在不使用$cityList的情况下访问$cityList？

更新

我做出榜样时犯了一些错误。我必须将事件绑定到<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

请注意，您没有将click()绑定到li个元素，而是绑定到ul元素。

这与li元素绑定：

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

如果你想绑定#citylist的直接后代，请使用：

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

Answer 3

javascript有封闭所以如果你这样做：

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

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

Answer 4

您可以通过修改处理程序的上下文

来完成此操作

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

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

jsfiddle

上的示例

Answer 5

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

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

你可以绝对且更有效地在处理函数中使用$ cityList。

Answer 6

我认为绑定你想要的东西并使用你正在寻找的选择器的最佳方法之一是：

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

使用$（'li'，'ul＃citylist'）你告诉jQuery你要选择的元素及其父元素，这样jQuery会更快找到你想要选择的元素（jQuery中的选择器总是有2个参数，但最后一个，父选择器，通常被遗忘。）

要从事件内部选择#citylist，您只需要提供给触发事件的元素的父级（$（this））

希望这有帮助

优雅的方式来访问jQuery选择器

6 个答案: