如何選擇顯示在列表中給定元素左側和右側的內嵌塊元素？

我有一個無序列表（<ul>）與許多<li>元素。 <ul>元素的寬度爲100％，這取決於瀏覽器窗口大小，它適合1到n個嵌套塊元素的「n」個數。因此，該列表包含x個行，每行具有「n」個元素。如何選擇顯示在列表中給定元素左側和右側的內嵌塊元素？

給定一個元素，使用jQuery我想選擇同一行中的所有其他元素。我怎樣才能做到這一點？

在這張圖片中，我展示了兩種不同的瀏覽器窗口大小的情況。我想要選擇的元素以綠色突出顯示。

來源

2015-08-31 RayOnAir

我直接看到的問題是，你想要選擇基於行可以根據窗口大小不同的事實。它會如果你可以使用'classes'作爲元素並且做一些類似[** this **]（https://jsfiddle.net/m4vLvobn/1/）的工作，那麼要容易得多。 – urbz

請檢查我的答案，它將適用於你的場景。如果瀏覽器的寬度會動態變化，那麼將其添加到$（window）.resize（）fn – Chetan

您必須通過匹配相同的位置來識別同一行上給定的<li>'s兄弟姐妹。

下面是示例代碼，你可以使用

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會給你你所期望的，但是這不會包括給予<li>

初始如果你想讓它包括本<li>然後更改每個選擇器如下'givenLi.parent().children().each...'

來源

2015-08-31 13:14:45 Chetan

它的工作原理！不知何故，我認爲jquery'.position（）.top'只適用於絕對或相對位置定義'top'css值的元素。但是，如您的答案所示，'.position（）。top'適用於內聯塊和其他元素。我調整了你的答案，使用：var sameRowLis = $（）;'而不是'var sameRowLis = [];'和sameRowLis.add（$（this））;'而不是'sameRowLis.push （$（this）[0]）;' – RayOnAir

感謝您的提示！ Didnt知道我可以添加到jQuery對象，解決方法也是如此。 – Chetan

如果你使用'.add'，只要確保你像這樣使用它：'sameRowLis = sameRowLis.add（$（this））;'，否則sameRowLis將不會在每個循環中更新。 – RayOnAir

你的例子是有點不清楚，如果所有的<li>可相同<ul>裏面，那麼你就不能在任何簡單的方式選擇什麼<li>是視覺之前或之後ñ。如果您選擇在「行」的最後一個元素，那麼它也將選擇下一行第一li，作爲下一個li是在DOM

在另一方面選定一個後，如果你有幾個<ul>使用<li>元素來實現「行」<li>視覺和您的代碼然後你可以例如做到這一點。

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

來源

2015-08-31 12:32:53 NachoDawg

我添加了一個圖像以使其更清晰。我不能做你的建議，因爲我之前不知道哪些元素將視覺上落在同一行中，因爲元素的數量取決於窗口大小... – RayOnAir

如何選擇顯示在列表中給定元素左側和右側的內嵌塊元素？

回答

相關問題