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/

In the code, I have a div(.arrow) nested on another div(.oddpost). What I want to do is hide the .arrow of the left .oddpost only. The idea is .arrow hides when .oddpost is near the left side of #content.

I’ve tried using offset but it gives the same offset().left value on all the oddpost div so all the arrow div still hides, even the one on the right.

Can anybody tell me how to fix this?

Answer 1

The position() call returns values for the first selected element (it doesn’t work on all selected elements as many other jQuery calls). Check Javadoc.

This is working for me:

$(function(){

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

});

The modified jsfiddle: http://jsfiddle.net/Ek5Gy/54/