如何使用jQuery选择器选中所有子级div，排除孙级div？

嘿，我懂你的问题啦！你想让jQuery只选中.main下面那些最外层的.this元素，而不是嵌套在更深层级（比如第一个.this内部的那个），对吧？之前用.find('.this')会把所有后代里的.this都匹配到，所以才会不小心把孙级的也显示出来。

这里有两种实用的方法可以解决这个需求：

方法一：使用:not()选择器排除嵌套元素 #

这种方法先找到.main下所有的.this元素，再排除那些被其他.this包含的元素，直接筛选出最外层的目标：

$('.main .this:not(.this .this)').show();

方法二：用.filter()方法过滤元素 #

如果你的HTML结构更复杂，用过滤函数会更灵活——遍历所有找到的.this，只保留那些父级链中没有其他.this的元素：

$('.main').find('.this').filter(function() {
  // 检查当前元素的父级里有没有其他.this，没有就保留
  return !$(this).parents('.this').length;
}).show();

完整示例代码 #

把HTML、CSS和JS整合起来，效果就符合你的需求了：

<style>
div.this { display:none; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='main'>
 <div>
   <!-- 中间嵌套的层级 -->
   <div>
     <div class='this'>show this!!!!!!!!!!
       <div>
         <div>
           <div class='this'>do not show this</div>
         </div>
       </div>
     </div>
   </div>
 </div>
</div>
<script>
// 任选一种方法即可
$('.main .this:not(.this .this)').show();
// $('.main').find('.this').filter(function() {
//   return !$(this).parents('.this').length;
// }).show();
</script>

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