gpt4 book ai didi

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

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:18:39 25 4
gpt4 key购买 nike

你能写一个函数来判断两个 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");
}

关于javascript - 如何测试两个 HTML 元素或 jQuery 选择器之间的等价性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17933463/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com