jQuery：获取给定“y”上方的元素位置

Question

如何使用 jQuery 以优雅的方式做到这一点？

将 z 属性（例如：红色背景）应用于 div 父级的每个子级
而它们的位置高于给定的顶部偏移 y。

我尝试过不同的方式，但我对其中任何一个都不满意......
我知道必须有一种简短而优雅的方法来做到这一点......

Answer 1

既然你说你已经尝试了几种方法，并且你只是在寻找更优雅的方法，那么我假设你已经解决了偏移部分，并且我将使用 offset 我自己。根据需要修改该部分。为了优雅，您可以创建一个自定义选择器检查顶部偏移量：

$.expr[':'].above = function(obj, index, meta, stack) { 
    return $(obj).offset().top < meta[3];
}

然后您可以这样查询它：

$('#myParentDiv').find('div:above(100)').css('background-color', 'red');

当然，这也可以表达为

$('#myParentDiv div:above(100)').css('background-color', 'red');

or ，正如注释中指出的那样

var y = 100;
$('#myParentDiv div:above('+y+')').css('background-color', 'red');

Answer 2

像这样的事情应该可以完成工作：

var y = 250,
    RED = '#F00';

$('#parent > *').css('background-color', function (i, v)
{
    if ($(this).offset().top < y)
    {
        return RED;
    }
    return v;
});

选择器 '#parent > *' 将选择 id parent 的元素的所有直接子元素（不是所有后代）。我认为这就是您正在寻找的，因为您说过“适用于 div parent 的每个子级。”

演示：http://jsfiddle.net/mattball/87QFU/1/

Answer 3

孩子们是动态放置的顶部偏移还是他们都有一个共同的CSS类？

 <script type="text/javascript">
   $("div").children(".offsetelement").css("background-color", "red");
 </script>