Question

在以下代码中，有三个图像位于同一位置。从数据库中检索图像的位置，每次刷新页面时它们都会有所不同。

如何使用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;">

Answer 1

基本上，我创建了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);
        }
    }
}

Answer 2

首先，您可以为要查询的所有元素分配一个类（比如'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）。分组的优点是，如果需要，您可以检查组计数并执行更多逻辑。

希望它有所帮助！

Answer 3

因为您只想更改重叠图像的位置，比较两个图像之间的顶部和左侧就足够了。例如：

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
            }
        }
    }
}

如何找到具有相似绝对定位的元素？

3 个答案: