结合使用时,find()和children()之间的jQuery差异:first

Question

在回答以下jQuery问题的过程中需要帮助优化下面的jquery代码,我偶然发现了另一个关于.find()和的问题.children().

问题是,给定四个带有id state,city,branch,branchAddress的选择框,除去每个选择框的第一个选项.

已经发布了几个答案.其中包括:

1. $('#state,#city,#branch,#branchAddress').children('option:not(:first)').remove();
2. $('#state,#city,#branch,#branchAddress').children('option:not(:first-child)').remove();
3. $('#state,#city,#branch,#branchAddress').find('option:not(:first)').remove();

方案1似乎并没有按照工作(删除所有选项,除了第一个选择框的第一个选项),以这个js小提琴(http://jsfiddle.net/QkNRf/1/)

解决方案2和3似乎完美无缺.

如果有人可以指出我错过的内容,或者向我解释为什么解决方案3在解决方案1没有的情况下工作,我会很高兴.

Answer 1

所有其他答案都是正确的但我认为文档中的重要部分解释了为什么示例1失败以及为什么数字3工作的原因是虽然.children()有效地过滤了前一个选择器的结果,但是.find()会执行选择器上下文搜索,所以(我假设)它将'option:not(:first)'在所有4个上下文中执行搜索并整理结果,同时.children()首先整理结果,然后使用'option:not(:first)'有效删除除了第一个之外的所有内容进行过滤...

在这种情况下,搜索的深度无关紧要.