Question

我不太确定在jquery中使用“this”[当前上下文]。我知道的是 - 它阻止了dom搜索所有元素，它只是在当前元素上工作，这提高了性能[正确]我，如果我错了。。而且我不知道何时使用这个，什么时候不用。让我们说，我应该去

  $("span",this).slice(5).css("display", "none")

或

 $("span").slice(5).css("display", "none")

两者都可行，但我不是很清楚它是如何工作的。有人用差异/适当的例子解释它，何时使用什么？ [编辑]

      $(function() {
        $("#clickme").click(function() {
            $("span",this).slice(5).css('display', 'block');//doesn't work ? why?
             $("span").slice(5).css('display', 'block');//works..why?

        });
    });
enter code here <span id="clickme">Click me</span>
                 <span>itam1</sapn>
                <span>itam2</sapn>
                <span>itam3</sapn>
                 <span>itam4</sapn>
                    <span>itam5</sapn>
                    ...upto10

Answer 1

通常，您可以在事件处理程序上使用this关键字，因为它将是对触发事件的元素和其他jQuery函数（如$.each）的引用。

例如，当处理点击事件时，请说：

$('.parentElement').click(function () {
  $('.foo', this).hide();
});

上面的代码会隐藏所有与foo类相同的元素，这些元素是所点击的当前parentElement的后代。

使用jQuery函数的context参数相当于调用find方法：

$(expr, context);
// is just equivalent to:
$(content).find(expr);

编辑：查看您的示例：

    $("#clickme").click(function() {
      $("span",this);//... (1)
      $("span");//..       (2)
    });

第一行将查找span（后代）内的所有#clickme元素，因为该元素是触发click事件的那个。

第二行将在整个页面上查找所有 span元素。

Answer 2

工作原理

让我们将这个HTML用于示例：

<div id="container">
   <div class="column"><a href="#">Link 1</a></div>
   <div class="column"><a href="#">Link 2</a></div>
</div>
<div id="footer">
   <a href="#">Link 3</a><a href="#">Link 3</a>
</div>

只有在已经有对DOM元素或jQuery包装元素集的缓存引用时，才应使用jQuery函数的作用域参数：

var $set = $('#container');
$('a', $set).hide(); // Hides all 'a' tag descendants of #container

或者在某个事件中：

$("#container").click(function(e){
   $('a', this).hide(); // Same as call above
}

但是像这样使用它是没有意义的：

$('a', '#container').hide()

什么时候应该这样写：

$('#container a').hide();

说了这么多，如果你已经拥有了jQuery或DOM元素，那么使用.find()而不是在jQuery函数中使用第二个参数通常更清晰，更清晰。我给出的第一个例子就是这样写的：

var $set = $('#container');
$set.find('a').hide(); // Hides all 'a' tag descendants of #container

如果这一次调用是您抓取#container对象的唯一原因，您也可以这样写，因为它仍然会将搜索范围限定为#container元素：

$("#container a").hide(); // This is the same as $('a', "#container");

您为什么要选择范围

当jQuery查找未作用域的选择器时，它将搜索整个文档。根据选择器的复杂程度，这可能需要很多的搜索。如果您知道您要查找的元素仅出现在特定父级中，那么它将真正加速您的代码以将选择范围限定为该父级。

无论您选择哪种方法，都应尽可能选择范围。

这个，当前的上下文 - 什么时候应该在jQuery中使用？

2 个答案: