jQuery根据类中的其他元素检查每个元素

jQuery checking each element against each other element in a class

本文关键字：元素 检查 其他 jQuery      更新时间：2023-09-26

（ty putvande和shanet指出错误的"）"现在被删除了，但我不得不转发这个问题，因为它只得到了与那个小错误有关的答案，而不是主要问题）

我在javascript中构建以下内容时遇到了很多困难：

对于具有Assemble_station class 的每个元素

用Assemble_station class 检查是否相互重叠

如果是：检查两个元素中哪个元素的左位置最大，将左位置最大的元素移动到另一个位置以避免碰撞

这是我写的

$(".Assemble_station").each(function (i, firstobj) {
    $(".Assemble_station").each(function (i, secondobj) {
        if ($(firstobj).overlaps($(".Assemble_station").not(firstobj), secondobj)) {
            if ($(firstobj).css("left") >= $(secondobj).css("left")) {
                $(secondobj).css("top", "98px");
            }
        }
    });
});

下面是一个jsfiddle，它使用了后面的代码：http://jsfiddle.net/NxWxU/6/

为了总结这个问题，我正在努力寻找做上述事情的最佳实践方法。到目前为止，我甚至不明白为什么我当前的代码不起作用。><

如果您在jsfiddle中打断我的代码，并在移动到相同的垂直位置之前观察它们的位置，您可以看到一些元素明显重叠。

Ty花时间尝试帮助

改进编码和调试技能的建议

您更新的代码（其中解决了overlaps函数的缺失）失败了，因为jQuery插件不应该以这种方式使用。在尝试解决此类问题之前，请考虑阅读有关创建jQuery插件的内容，并尽可能多地阅读有关javascript调试的内容。

在设置断点后（或在代码中使用debugger语句），尝试在控制台中执行以下所有操作来开发调试能力：

  • 逐步播放相关代码
  • 检查变量值
  • 通过堆栈
  • 在控制台中放入命令，查看代码在该上下文中的行为

例如，为了解决这个问题，我在控制台中使用了一些jQuery:

> $(".Assemble_station") // this returned elements with [visibility:hidden] so I tried:
> $(".Assemble_station:visible") // but I got the same results, so I ended up using:
> $(".taskNameItem").remove() // then I checked again:
> $(".Assemble_station") // and now the results are different :)

所有这些都是在控制台中完成的，而无需更改代码。因此，当代码处于断点时，通过在控制台中放置命令，您可以学到很多东西。但是在jsFiddle中，请记住使用控制台底部的下拉菜单将<top frame>帧更改为result帧。

代码中的实际问题

将overlaps更改为jQuery插件的问题在于，jQuery插件可以同时对许多项调用。因此，很难将其作为插件进行调整以正常工作，最好使用原始版本。

但使用原始函数的问题是，它可以处理普通的HTML元素，但元素并不那么简单（因为你隐藏了部分，容器有位置，而内容有大小）。所以我不得不破解overlaps中的getPosition函数，使其与你奇怪的HTML:一起工作

var overlaps = (function () {
    function getPositions( elem ) {
        var obj = $( elem );
        var pos = obj.position();
        //HACK: weird HTML force me to use its first child's dimensions
        var child = obj.children(":first-child"); 
        var width = child.width();
        var height = child.height();
        return [ [ pos.left, pos.left + width ], [ pos.top, pos.top + height ] ];
    }

看看这个关于如何使用overlaps函数的新代码（在第二个each中，我不仅删除了第一个obj，还删除了之前循环中已经使用i1 + 1作为起点测试的所有其他对象）：

var stations = $('.Assemble_station');
stations.each(function(i1, firstobj) {
    stations.slice(i1 + 1).each(function(i2, secondobj) {
        if(overlaps(firstobj, secondobj)) {
            var obj1 = $(firstobj);
            var obj2 = $(secondobj);
            var objToMove = obj1.position().left >= obj2.position().left ? obj1 : obj2;
            var newTop = objToMove.position().top + 18;
            objToMove.css("top", newTop + 'px');
        }
    });
});

您的另一个问题是，页面上的几个元素共享IDs。如果您给一个元素一个id，它应该是整个页面中唯一具有该id的元素。如果不遵守这个基本的HTML假设，jQuery将无法按预期工作。我通过删除（而不是隐藏）标题和黄色条（并在按id获取对象之前这样做）解决了这个问题，这样它们就不会干扰碰撞检测。

完整的解决方案

你可以在这里玩我的jsFiddle：http://jsfiddle.net/protron/NxWxU/8/

相关文章：