4

在回答以下 jQuery 问题Need help in Optimizing the below jquery code的过程中，我偶然发现了另一个关于.find()and的问题.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();

根据this js fiddle（ http://jsfiddle.net/QkNRf/1/ ） ，解决方案1似乎不起作用（删除所有选项，第一个选择框的第一个选项除外）

解决方案 2 和 3 似乎工作得很好。

如果有人能指出我错过了什么，或者向我解释为什么解决方案 3 在解决方案 1 不适用的情况下有效，我会很高兴。

4

2 回答 2

6

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

在这种情况下，搜索的深度无关紧要。

于 2012-12-03T16:30:07.120 回答
4

来自文档：.children()：

.children() 方法与 .find() 的不同之处在于 .children() 仅沿 DOM 树向下移动一个级别，而 .find() 也可以向下遍历多个级别以选择后代元素（孙子等）。

于 2012-12-03T16:17:48.073 回答