如何找到具有相似絕對位置的元素？

在下面的代碼中，有三個圖像位於同一位置。圖像的位置從數據庫中檢索，並且每次頁面刷新時都會發生變化。如何找到具有相似絕對位置的元素？

如何找到並選擇與jQuery/JavaScript具有類似絕對定位的元素？我想改變重疊圖像的位置。

<img style="position:absolute; top:249.93px; left:291.056px;"> 
<img style="position:absolute; top:123.44px; left:291.056px;"> 
<img style="position:absolute; top:249.93px; left:291.056px;"> 
<img style="position:absolute; top:152.281px; left:582.871px;"> 
<img style="position:absolute; top:151.803px; left:365.156px;"> 
<img style="position:absolute; top:249.93px; left:291.056px;">

來源

2015-04-24 NL500

兩個建議。（1）嘗試搜索「JavaScript碰撞檢測」，（2）也許[jQuery masonry plugin]（http://masonry.desandro.com）可以完成這項工作。 –

因爲你只是想改變重疊圖像的位置，所以比較兩幅圖像之間的頂部和左側就足夠了。例如：

var imglist = document.getElementsByTagName('img'); 
if (imglist.length > 1) { 
    var distance = 1.5; // change the value 
    for (var i = 0; i < imglist.length; i++) { 
     for (var j = i + 1; j < imglist.length; j++) { 
      var t1 = imglist[i].style.top.replace('px', ''); 
      var l1 = imglist[i].style.left.replace('px', ''); 
      var t2 = imglist[j].style.top.replace('px', ''); 
      var l2 = imglist[j].style.left.replace('px', ''); 
      if (Math.abs(t1 - t2) <= distance && Math.abs(l1 - l2) <= distance) { 
       // imglist[i] && imglist[j] have similar or the same position 
       // TODO what you want 
      } 
     } 
    } 
}

來源

2015-04-24 09:28:19

完美地工作。謝謝。 – NL500

基本上，我創建了2個循環，1會在所有的元素，二是走在所有其他元素，所以我們可以比較一下位置。使用此代碼：

var arr = document.getElementsByTagName('img'); 
for(i=0; i<arr.length; i++) { 
    console.log(arr[i]); 
    for(j=0; j<arr.length-1; j++) { 
     if((arr[i].offsetTop == arr[j].offsetTop) && (arr[i].offsetLeft == arr[j].offsetLeft)) { 
      alert('top: ' + arr[i].offsetTop + ' left: ' + arr[j].offsetLeft); 
     } 
    } 
}

來源

2015-04-24 08:45:16 odedta

爲什麼不解釋你的答案，而不僅僅是提供代碼？ – evolutionxbox

是的，我注意到在我發佈我的代碼後，sheesh：P – odedta

我重新閱讀了我的評論......對此感到抱歉。我只是認爲解釋你提供的內容會有幫助。然後像我這樣的小菜可以從你的方法中學到一兩樣東西。 – evolutionxbox

首先，你可以將類分配給您要查詢（說「elementClass中」）的元素都

<img class="elementClass" style="position:absolute; top:249.93px; left:291.056px;"> 
<img class="elementClass" style="position:absolute; top:123.44px; left:291.056px;"> 
<img class="elementClass" style="position:absolute; top:249.93px; left:291.056px;"> 
<img class="elementClass" style="position:absolute; top:152.281px; left:582.871px;"> 
<img class="elementClass" style="position:absolute; top:151.803px; left:365.156px;"> 
<img class="elementClass" style="position:absolute; top:249.93px; left:291.056px;">

然後要麼document.getElementsByClass('elementClass')或$('.elementClass')

所有元素

然後重複收集

var results = []; 
var elements = document.getElementsByClass('elementClass') 
for(int i =0 ; i< elements.length;i++) 
{ 
    var eleResult = {}; 
    eleResult.id = elements[i].id; 
    eleResult.position = elements[i].position(); 
    results.push(eleResult); 
}

然後，您可以將位置位置的結果進行分組（可以編寫您的util方法，或者如果希望可以使用linq.js）。分組的優勢在於，您可以檢查組計數並根據需要執行更多邏輯。

希望它有幫助！

來源

2015-04-24 08:57:12

如何找到具有相似絕對位置的元素？

回答

相關問題