jquery - 在点击宽度上选择最后一个 div

Question

我们在页面上有很多divs（参见下面的演示）。 divs的容器宽度不固定。

如果用户点击 jquery 行中的一些DIV，如何选择行中的最后一个DIV？

html 的演示： http://jsfiddle.net/F7xHa/

文字说明：（# - 是 div，X - 点击 div，S - 需要用 jquery 选择这个 DIV）

# # # # # - line
# X # # S - line with click
# # # # # - line
# # # # # - line

这个想法（也许不是最好的）： 1.当用户点击一些DIV（标记为X）时，需要从页面顶部以某种方式偏移到点击位置。 （屏幕点击宽度） 2.然后以某种方式选择所有可见元素直到单击位置宽度） 3. 选择其中的:last。

也许它会有所帮助：我已经知道如何选择页面上最后一个可见的 DIV。我使用 inViewport 插件。但现在任务变得更加艰巨了。

Answer 1

这样的事情怎么样：

$('.img').on('click', function(){
    var $self = $(this),
        elements = [],
        selfOff = $self.offset().top;
    $('.img').each(function(){
        if($(this).offset().top == selfOff){
            elements.push($(this))
        }
    })
    elements[elements.length-1].addClass('last')
})

Demo

可能是一个更好的选择，但目前想不出另一个。 这将只选择最后一个！

如果需要选择当前和最后一个之间的元素：

$('.img').on('click', function(){
    var $self = $(this),
        elements = [],
        selfOff = $self.offset().top;
    $('.img').each(function(){
        if($(this).offset().top == selfOff){
            elements.push($(this))
        }
    })
    $self.nextUntil(elements[elements.length -1]).addClass('last')
})

Demo

或者，如果您想选择所有元素（单击和最后一个）：

$('.img').on('click', function(){
    var $self = $(this),
        elements = [],
        selfOff = $self.offset().top;
    $('.img').each(function(){
        if($(this).offset().top == selfOff){
            elements.push($(this))
        }
    })
    $self.nextUntil(elements[elements.length-1]).add($self).add(elements[elements.length-1]).addClass('last')
})

Demo