JQuery 在元素中找到最高的 css 值并更改类

Question

我有这样的 HTML:

<div class="row1"></div>
<div class="row2"></div>
<div class="row3"></div>
<div class="row4"></div>
<div class="row5"></div>
<div class="row6"></div>
<div class="row7"></div>
<div class="row8"></div>
<div class="row9"></div>
<div class="row10"></div>

每个 div 中都有图像。

然后 jQuery 为每一行的左值设置动画:

  $( ".row1" ).delay( 600 ).animate({
     left: "580", 
  }, 9000, function() {
  });

 $( ".row2" ).delay( 600 ).animate({
     left: "310", 
  }, 6000, function() {
  });

等等。

现在我想找到左值最高的行，并更改它的 CSS。

上面的代码在您单击按钮时运行(根据 jQuery 中的值将行/图像向右移动)。所以我需要创建代码来读取发生这种情况后的值，找到具有最高左值的行(换句话说，已经向右移动最远的行)并使该行成为 .after伪类可见。

Answer 1

这是俗气的和未经测试的，但假设您的 DIV 在父容器中，我会找到它们，以及它们在动画后的位置，按位置排序，然后从列表中取出最高的。像这样:

var divs = $('parent > div').map(function(i, o) { return [o.position().left, o]; });
divs.sort(function(a, b) { return a[0] < a[1] ? -1 : a[0] > a[1] ? 1 : 0; });
var highest = divs.pop()[1];
highest.css( ... )