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 地图上滑动地图控件（以免覆盖它们）。需要更改的类都命名为“gmnoprint”，如果不忽略子级，则父级中的元素将移动每个嵌套级别所需数量的两倍。

我目前的解决方案（更多的是一个糟糕的 hack）是调用：

$('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);

Answer 2

这些 div 必须都存在于另一个容器中。如果我们假设它的 id 是container，请调用：

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

这只会深入一层，不会选择div.gmnoprint页面上的所有元素。