javascript – 如何测试两个HTML元素或jQuery选择器之间的等价？

2023年12月21日 160次阅读

你能编写一个函数,看看两块DOM是否相同吗？它应该忽略不相关的空白.理想情况下,它也应该忽略空属性.

所以以下内容应该是平等的：

<div style="">
<div>a</div>
</div>

和

<div><div>a</div></div>

最佳答案 我创建了一个函数,它将比较jQuery对象的长度并比较每个子元素的标记名称.到目前为止,它似乎在我为它创建的基本
fiddle中运行得相当好.这是代码,让我知道它是如何工作的,以及是否需要进行任何错误/改进.这不会比较内部文本,但如果你需要,我认为它应该很容易调整.

更新1：

更改为使用递归而不是for循环,现在它也会比较每个元素的内部文本.如果您不需要检查文本,只需删除该比较.

更新2：

根据OP评论,我发现并编辑了一些额外的函数,可用于比较元素的CSS并检查它们是否相同.如果不是,则元素不相同并返回false.

jQuery的：

第一个函数是一个jQuery函数,它将返回CSS属性的对象.

(function ($) {
    $.fn.getStyleObject = function () {
        var dom = this.get(0);
        var style;
        var returns = {};
        if (window.getComputedStyle) {
            var camelize = function (a, b) {
                return b.toUpperCase();
            }
            style = window.getComputedStyle(dom, null);
            for (var i = 0; i < style.length; i++) {
                var prop = style[i];
                var camel = prop.replace(/\-([a-z])/g, camelize);
                var val = style.getPropertyValue(prop);
                returns[camel] = val;
            }
            return returns;
        }
        if (dom.currentStyle) {
            style = dom.currentStyle;
            for (var prop in style) {
                returns[prop] = style[prop];
            }
            return returns;
        }
        return this.css();
    }
})(jQuery);

定义的下一个函数用于比较前一个函数返回的对象.

function arrays_equal(a, b) {
    var result = true;
    $.each(a, function (key, value) {
        if (!b.hasOwnProperty(key) || b[key] !== a[key]) {
            result = false;
        }
    });

    return result;
}

这是检查两个元素之间相等性的主要功能.它将调用添加的jQuery函数来检索由CSS属性构成的对象,然后将这两个对象与添加的第二个函数进行比较.

 function equalElements(a, b) {
    if (a.length != b.length) {
        return false;
    }

    if (a.children().length != b.children().length) {
        return false;
    } else {
        if (a.children().length > 0) {
            var x = a.children().first();
            var y = b.children().first();
            equalElements(x, y);
        }

        if (a.get(0).tagName != b.get(0).tagName) {
            return false;
        }

        if (a.text() != b.text()) {
            return false;
        }

        var c = a.getStyleObject();
        var d = b.getStyleObject();

        if (!arrays_equal(c, d)) {
            return false;
        }
    }

    return true
}

HTML：
(用于比较和测试功能)

<div id="div1">
    <div>a</div>
</div>
<div id="div2" style="">
    <div>a</div>
</div>
<div id="div3" style=""></div>
<div id="div4" style="">
    <div>a</div>
    <div>a</div>
</div>
<div id="div5" style="">
    <div>b</div>
</div>
<div id="div6" style="width: 50px;">
    <div>a</div>
</div>
<div id="div7" style="width: 50px;">
    <div>a</div>
</div>
<div id="div8" style="width: 25px;">
    <div>a</div>
</div>
<div id="div9" style="width: 50px; height: 10px;">
    <div>a</div>
</div>
<ul id="list1">
    <li>a</li>
</ul>

测试代码：
(样本见fiddle进行全面测试)

var a = $("#div1");
var b = $("#div2");
var same = equalElements(a, b);

if (same) {
    alert("div1 is equal to div2");
}
点赞