Javascript 如何选择列表中给定元素左右两侧显示的内联块元素？

我有一个无序列表（

），其中包含许多

元素。

元素的宽度为100%，根据浏览器窗口的大小，可以将1到“n”个

内联块元素相邻放置。因此，该列表包含x行，每行包含“n”个元素

给定一个元素，我希望使用jQuery选择同一行中的所有其他元素。我该怎么做

在这幅图中，我展示了两个不同浏览器窗口大小的案例。我要选择的元素以绿色高亮显示。

---

您的示例有点不清楚，如果所有的

都在同一个
中，那么您无法以任何简单的方式选择n之前或之后可视的
。如果选择“行”上的最后一个元素，那么它还将选择下一行上的第一个
li
，因为下一个
li
位于dom中所选元素的后面

另一方面，如果您有几个带有
元素的
标记，以在视觉上和代码中实现
的“行”，那么您可以这样做

$('.container ul').on('click', 'li', function(){
    var prevLi = $(this).prev(), nextLi = $(this).next();
    //your code here
})

您必须通过匹配相同的位置来识别同一行中给定的
兄弟姐妹

下面是您可以使用的示例代码

var givenLi=$($('.ulnav li').get(6));
var sameRowLis=[];
givenLi.siblings().each(function(){
    if(givenLi.position().top === $(this).position().top){
        sameRowLis.push($(this)[0]);
    }
});
console.log($(sameRowLis));

sameRowLis将为您提供您所期望的，但是这不包括初始给定的

如果您希望它包含给定的
，请按如下所示更改每个选择器“givenLi.parent（）.children（）.each…”
我直接看到的问题是，您希望根据不同窗口大小的行选择元素。。如果您可以为元素使用
类
，并执行类似于..检查我的答案这样的操作，这将非常容易。它将适用于您的场景。如果浏览器的宽度将动态更改，则将其添加到$（窗口）。resize（）fnI添加了一个图像以使其更清晰。我不能按照你的建议去做，因为我之前不知道哪些元素在视觉上会落在同一条线上，因为元素的数量取决于窗口的大小…它可以工作！不知何故，我认为jquery
.position（）.top
只适用于定义
top
css值的绝对或相对位置的元素。但是，如您的答案所示，
.position（）.top
适用于内联块和其他元素。我使用：
var sameRowLis=$（）将您的答案改编为我的用例而不是
var sameRowLis=[]
和
sameRowLis.add（$（this））sameRowLis.push（$（this）[0]）谢谢你的提示！我不知道我可以添加到jQuery对象中，解决方法也是如此。如果使用
.add
，请确保这样使用它：
sameRowLis=sameRowLis.add（$（此）），否则不会在每个循环中更新sameRowLis。