jquery查找与上下文选择

Question

拥有以下html代码段

<div class="something">
    <p>Some text</p>
</div>
<div class="somethingElse">
    <p>some other text</p>
</div>

我认为以下jquery片段是相同的(将具有相同的结果):

$(".something").find("p").css("border", "1px solid red");

$("p", ".something").css("border", "1px solid red");

我的问题是,一个片段是否优于另一个片段并且应该被使用

Answer 1

电话不一样.

根据明显从事jQuery工作的Brandon Aaron,以及根据这里的实时测试,find方法总是更快.请参阅下面屏幕截图中的结果.如果我错过了什么,请评论.

根据浏览器的不同,速度差异可达10%或更大,看起来肯定值得使用find.

布兰登网站的进一步解释就在这里.

Answer 2

两个电话都是相同的.后一种呼叫被翻译成前者.如果要省略转换步骤,请使用前一步骤.

Answer 3

我可以想到一个用例,其中使用context表单可能更可取 - 在上下文包含在可能为null的变量的情况下.

例如:

// Only affect matching items that are descendants of '#parent'
do_something( $( '#parent' ) );
// Affect all matching items
do_something();

function do_something( $parent_element ){
  $( '.child', $parent_element ).each( function(){ } );
}

第二次do_something()被调用,如果我们使用$parent_element.find()它会失败,而在这个例子中,如果$parent_element是未定义或空的,则上下文为空,因此:整个文档.

不可否认,这是一个边缘案例,但它只是出现在我正在研究的东西上,所以我想把它放在这里为后代.

Answer 4

找到更好,40%:

http://jsperf.com/jquery-find-vs-context-2/13

注意区别:

$myDiv = $("myDiv")
myDiv = "#myDiv"

传递时$myDiv,jQuery元素作为上下文,比$ .find慢约10%.传入时#myDiv,jQuery选择器作为上下文,比$ .find慢40%.

$ .find> context.