Question

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

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

文字插图：（# - 是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

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

1 个答案: