Question

<div id="content">
<div class="oddpost">
    <div class="arrow"></div>
</div>
    <div class="oddpost">
    <div class="arrow"></div>
</div>
    <div class="oddpost">
    <div class="arrow"></div>
</div>
    <div class="oddpost">
    <div class="arrow"></div>
</div>
</div>

$(function() {
    if (($(".oddpost").position().left + $(".oddpost").width()) >= $("#content").width()) {
        $('.arrow').hide();
    }
});

http://jsfiddle.net/Ek5Gy/52/

在代码中，我有一个div（.arrow）嵌套在另一个div（.oddpost）上。我想要做的只是隐藏左.arrow的{{1}}。当.oddpost靠近.arrow的左侧时，我的想法是.oddpost隐藏。

我尝试过使用偏移但它在所有oddpost div上给出相同的#content值，所以所有的箭头div仍然隐藏，即使是右边的那个。

有人能告诉我如何解决这个问题吗？

Answer 1

您的主要问题在于您的选择器用法：

// selecting stuff
$(".oddpost")

// doing stuff on the selection
.position().left

但是，您必须知道这些辅助方法如何在给定集合上工作。 position（以及许多其他人）只能处理集合中的第一个元素。不是每个元素。

所以你需要做的是，iterate对集合中的每个元素进行独立的测试，例如：

$(".oddpost").each(function () {
  if ($(this).prev().length === 0 || $(this).offset().left < $(this).prev().offset().left) {
     $('.arrow', this).hide();
  }
});

// or
$(".oddpost").each(function () {
  if ($(this).position().left === 0) {
    $('.arrow', this).hide();
  }
});

http://jsfiddle.net/Ek5Gy/53/

Answer 2

你的例子很好。

在您的示例中，值为：

$(".oddpost").position().left + $(".oddpost").width() // Equals 100

这少于#content的总数，即270px。你问他是否大于或等于。如果你想在它靠近左边时隐藏箭头，试试这个：

 if ($(".oddpost").position().left === 0) {
     $('.arrow').hide();
 }

编辑：

$(function(){

$(".oddpost").each(function(){

    var position = $(this).position().left;
    alert (position);

    if(position === 0){
       // Do what you need to here.
    }

});

}）;

这就是你要找的......

Answer 3

position()调用返回第一个选定元素的值（它不像许多其他jQuery调用那样对所有选定元素起作用）。检查Javadoc。

这对我有用：

$(function(){

    $(".oddpost").each (function (idx, el) {  
        if ($(el).position().left < $(el).width()) {
            $('.arrow', el).hide();
        }
    });

});

修改过的jsfiddle：http://jsfiddle.net/Ek5Gy/54/

Answer 4

在您的代码中，$('.arrow').hide()将始终作用于与该特定选择器匹配的所有DOM元素（.arrow）。此外，对于第一个.oddpost元素，您的计算只执行一次，因为这是position() jQuery函数的行为。

我只是没有完全遵循“靠近内容左侧”的意思。我已经改变了你的代码以反映所有这些变化并准备了一点jsFiddle。检查here。

无法获得浮动div的正确偏移量

4 个答案: