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

我们在页面上有许多div，请参见下面的演示。div的容器宽度不是固定的

如果用户使用jquery单击行中的某个DIV，如何选择行中的最后一个DIV

html演示：

文本插图：-is div，X-单击div，S-需要使用jquery选择此div

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

这个想法可能不是最好的： 1.当用户单击某个标有X的DIV时，需要从页面顶部获得偏移量才能单击位置。屏幕上单击的宽度 2.然后选择所有可见元素，单击“位置宽度” 3.选择：最后一个

---

也许这会有所帮助：我已经知道如何选择页面上最后一个可见的DIV。我使用虚拟端口‎ 插件。但是现在的任务更难了。

像这样的事情怎么样：

$('.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')
})

也许是一个更好的选择，但现在想不出另一个。 这将只选择最后一个

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

$('.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')
})

$('.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')
})

或者，如果要选择所有元素，并单击最后一个：

$('.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')
})

$('.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')
})

---

我认为这个问题已经被问过了，并且被删除了，因为没有例子，也没有人理解这个问题。现在是html示例。请原谅我的语言。也许有人可以编辑这个问题，使它干净？我不知道如何定义div行-如果浏览器窗口的大小改变，它可能会改变。你已经很好地改进了question@A.Wolff非常感谢。您还可以对其进行编辑以使其更好。也许我犯了一些拼写错误。我不确定我定义的那条线，很难解释。谢谢！哇，你非常擅长jquery编码。似乎95%的访问者喜欢我不知道如何制作第一个变体，但你制作了两个。哪一个更好用？也许有一些优点和缺点？还是可移植性问题？还有一个问题是，在没有jquery.ready函数的情况下，它们是否都可以安全使用。如果dom没有准备好，注释中的最后一个可能会出错，但是用户点击？对于解决方案，如果使用相同宽度和高度的img，两者都是好的，如果使用不同的宽度，@A.Wolff将无法正常工作，如果你使用不同的高度，如果它们是浮动的，那么外观就会中断。我的不起作用…关于dom，每个代码都在dom ready上。看看JSFIDLE的左侧，你会看到onDomready。谢谢，我理解。我的意思是，我将在没有dom就绪的情况下使用这些代码，可以吗？所以，如果某个DIV加载并被用户点击，我需要立即做出响应。我不太明白你的意思。您可以在doc.ready或doc.load上加载代码，没有其他选项。