jQuery：获取给定'y'位置上方的元素答案

【问题标题】：jQuery: get elements above a given 'y' positionjQuery：获取给定'y'位置上方的元素
【发布时间】：2010-11-16 15:15:17
【问题描述】：

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

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

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

【问题讨论】：

顶部位置是相对于文档，还是文档的可查看部分，还是相对于父 div？
假设是相对于文档，那会更简单（实际上，它是相对于父母兄弟的位置）
所以当页面滚动时，它不会改变哪些元素受到影响。听起来对吗？

标签： jquery positioning

【解决方案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');

或者，如 cmets 中所指出的那样

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

【讨论】：

+1，我不会想到编写自己的伪选择器。酷！
太棒了！这是纯粹的优雅！如果我想给选择器一个变量作为参数（例如 var y = 100; ... ....find('div:above(y)')... ）怎么办？
@dolma：这行不通，因为y 只是字符串中的一个字符。你需要这样做：...find('div:above(' + y + ')')...
@DavidHedlund 惊人的答案，你能解释一下 meta[3] 是什么意思吗？我正在尝试在我的 div 周围获取附近的 div（如扫雷）
@Michel: meta，在这里，包含有关使用的伪选择器的所有信息。在div:above(30) 中，它将是一个看起来像[":above(30)","above","","30"] 的数组。因此，meta[0] 是整个被评估的伪选择器，meta[1] 只是选择器的名称，meta[2] 是双引号还是单引号包裹值；在我们的情况下，两者都没有。 meta[3] 这是我感兴趣的所有输入参数，它将是 "30"。如果我们构建了一个伪选择器，上面写着:between(30,50)，那么meta[3] 就是"30,50"，我们必须从那里解析字符串。

【解决方案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/

【讨论】：

+1 但如果你已经有一个 jQuery 对象作为父对象，你也可以使用 parent.children() 作为第一级子对象，或者使用 parent.find('*') 作为整个子树。跨度>
由于 OP 要求 above 给定偏移量的位置，您可能想要比较 < y，因为顶部的 Y 为 0。
@Jason：你是对的，但我不确定我是否明白你的意思。选择器优化？这不是这个问题的目的。
我真的很喜欢它，但我认为它仍然可以更有效：通过这种方式，我在测试每个孩子；但如果元素是例如 <p> 或<li>，则可能是逻辑假设如果我有一个低于y 的孩子，那么其他孩子在此之后一个将低于ytoo，所以我们可以节省下一个测试。
@dolma：在这种特定情况下，当您/您的老板/您的客户（基本上，无论您为谁开发）注意到事情花费的时间太长时，性能就会成为问题。请记住，当您使用 jQuery 时，您已经受到了性能的影响，但关键不在于性能 - 而是 开发人员的时间比 CPU 时间更有价值。让我再说一遍，因为它是那么重要。 开发人员的时间比 CPU 时间更有价值。 jQuery 允许您编写适用于所有浏览器的 DOM 代码，从而节省您（开发人员）的时间，因此您可以编写符合以下条件的代码其实更多……

【解决方案3】：

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

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

【讨论】：