javascript - 选择一个类的所有 div 并为其设置动画，但忽略同一类的所有子元素

Question

我希望有一个简单的解决方案，但目前我看不到。

我试图选择类为 myClass 的所有 div，但忽略该类的所有子级，包括那些类为 myClass 的子级。例如:

<div class="myClass"> //select
    <div class="myClass"> //don't
      <div class="myClass"></div> //don't etc
    </div>
</div>
<div class="myClass"></div>
<div class="myClass">
     <div class="myClass"></div>
</div>
<div class="myClass"></div>

我知道这是一个奇怪的情况，它是由于在侧 div 中滑动时需要在 Google map 上滑动 map 控件(以免覆盖它们)而引起的。需要更改的类都被命名为“gmnoprint”，如果不忽略子级，则父级中的元素将移动每个嵌套级别所需数量的两倍。

我当前的解决方案(更多的是一个糟糕的黑客)是调用:

$('div.gmnoprint').stop().animate({ 'marginLeft': '418px' }, 800);
$('div.gmnoprint').children('div.gmnoprint').stop().animate
    ({ 'marginLeft': '0px' }, 800);

但是这是非常低效的并且是处理器密集型的。

抱歉，如果这是重复的，但我找不到类似的内容。

非常感谢任何帮助。

Answer 1

$('div.gmnoprint')
    .filter( function() {
        return $(this).parent().closest('div.gmnoprint').length === 0;
    })
    .stop()
    .animate({ 'marginLeft': '418px' }, 800);