jQuery问题：$(data)无法选中div#container但可选中div.container-wrap

嘿，我来帮你拆解下这个常见的jQuery小坑：

最可能的原因：#container是$(data)的根元素，而非后代元素 #

jQuery的find()方法是用来查找当前元素集合的后代元素的，它不会匹配集合本身的元素。如果你的$(data)解析后对应的DOM元素就是那个id="container"的div，那用find('div#container')自然找不到——因为你在找它的子元素里有没有这个id的元素，而它自己不在后代列表里。

反过来，div.container-wrap能被选中，说明这个class的元素是#container的后代（也就是$(data)的后代），所以find()能正常匹配到。

举个直观的例子，假设你的data对应的HTML是这样的：

<div id="container">
  <div class="container-wrap">...</div>
</div>

当你用$(data)解析后，得到的jQuery对象就是外层的<div id="container">元素。这时候：

• $(data).find('div.container-wrap') → 查找它的子元素，能匹配到
• $(data).find('div#container') → 查找它的后代里有没有id为container的元素，显然没有

怎么验证&解决？ #

如果要确认$(data)是不是就是#container，可以直接打印$(data).attr('id')，看看输出是不是container。

如果确实是这种情况，要选中这个元素的话，应该用filter()方法（筛选当前集合中的元素）：

$(data).filter('div#container')

或者更简单，直接判断$(data)本身就是你要找的元素，直接用它就行。

其他可能性（概率较低） #

• 页面中存在多个id="container"的元素：不过HTML规范里id必须唯一，这种情况不应该出现，就算出现，find()也只会匹配后代里的第一个，但如果根元素就是它的话还是不会被find到。
• 解析DOM时的特殊情况：比如data里的HTML有嵌套错误，导致#container的结构被破坏，但这种情况通常会影响container-wrap的选中，所以可能性不大。

内容的提问来源于stack exchange，提问作者Santhosh