Question

假设以下html结构：

<div id="anId">
    <span id="1"> aSpan </span>
    <span id="2"> anotherSpan </span>
</div>
<span id="3"> anOutsideSpan </span>

有没有办法为jQuery选择器定义“全局上下文”？类似的东西：

$(IDoNotKnowWhatToDoHere). SomethingAboutContext; // Defining the context as div#anID

$('span').doSomething; // Action only on span#1 and span#2 and not on span#3

$('span#1').doSomethingElse;

$('span').doSomethingStrange;

$('span#2').doSomethingCool;

$(SomethingAboutRemovingGlobalContext); //Removing the context

这样我可以避免这样做：

$('div#anId span').doSomething; // Action only on span#1 and span#2 and not on span#3

$('div#anId span').doSomethingElse; // Same as last code comment

$('div#anId span#1').doSomethingStrange; // Same as last code comment

$('div#anId span#2').doSomethingCool; // Same as last code comment

这里只有4个动作，但我正在处理的代码有100个。

我想避免一直重复div#anId。

请记住，这是一个示例，而非实际代码。
我的问题不是关于链接。

Answer 1

var $g = $.proxy($.fn.find, $("div"));
$g('span').doSomething; // Action only on span#1 and span#2 and not on span#3
$g('#1').doSomethingElse;
$g('span').doSomethingStrange;
$g('#2').doSomethingCool;

所以你在这里做的就是创建一个新的选择器，委托给$("div").find并将其用于你的所有选择。

Answer 2

如果无法链接方法，请存储对所选元素的引用。一遍又一遍地选择它们是不必要的（并且很慢）：

var $elements = $('div#anId span');

$elements.doSomething();
$elements.doSomethingElse();
//...

更新：由于ID必须是唯一的，因此如果具有ID，则不必提供任何上下文来选择特定的span元素。 $('div#anId span#1').doSomethingStrange();只会成为$('#1').doSomethingStrange();。

您还可以存储对祖先的引用：

var $context = $('div#anId');

并使用find() ^[docs]：

$context.find('span').something();

但即使这样，您也可以将方法链与end() ^[docs]一起使用：

$('div#anId')
  .find('span')
     .doSomething()
  .end()
  .find('.somethingElse')
      .doSomethingElse()
  .end()
  //...

Answer 3

如果您希望每个<span>的相同的操作，无论他们在哪个<div>，您都可以执行以下操作：

$('div span').doSomething(); // both spans inside a div
$('div span:first').doSomething(); // first span inside a div
$('div').next().doSomethingElse(); // span after div

Answer 4

实际上，jQuery已经支持：

http://api.jquery.com/jQuery/

你只需要在jQuery函数调用中传递context元素作为第二个参数，在你的情况下将是：

var context = $('div#anId');
$('span', context);

您也可以context.find('span')，结果也一样。

我还没有彻底阅读源代码，知道哪种用途有更好的性能，但我的猜测是差异不会太明显。

Answer 5

你从未学过链接吗？

$('div#anId span').doSomething().doSomethingElse().doSomethingStrange().doSomethingCool();

BTW数字不是有效的ID。它必须以一封信开头。请参阅：http://www.w3.org/TR/html4/types.html#type-name

jQuery全局上下文

5 个答案: