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中的值将行/图像移动到右侧）。因此，我需要创建在发生这种情况后读取值的代码，找到具有最高左值的行（换句话说，向右移动的那一行），并使该行成为{{s> { {1}}伪类可见。

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( ... )

Answer 2

所以你可以这样做。

也许您为每个行类提供了另外一个类，例如：

<div class="row row1"></div>
<div class="row row2"></div>
<div class="row row3"></div>
<div class="row row4"></div>

比你可以这样做：

var mostLeftElement = $();
var mostLeft = null;
$('.row').each(function() {
    mostLeft = Math.max(highest, parseFloat($(this).postion().left));

    if(mostLeft == $(this).postion().left)){
        mostLeftElement = $(this);
    }
});

mostLeft =给你左值

mostLeftElement =为您提供元素

$element.position()左侧;
从父

中为您提供元素的相对左侧位置

而 $element.offset()左侧;
从文档

中为您提供元素的相对左侧位置

希望有所帮助，提摩太

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

2 个答案: