Question

This question和this question解释了如何比较两个jQuery元素/对象的内容？

但是，我们需要比较内容及其属性。

元素1：

<div id="A" width="200" height="200" style="stuff"></div>

元素2：

<div id="B" width="300" height="300" style="differentstuff"></div>

元素3：

<div id="C" width="200" height="200" style="stuff"></div>

假定所有三个元素的内容与链接答案中所述的$.html()方法所测试的内容相同。

元素1和3应该相等，元素2应该不等于元素1和3。

是否有本地方法可以执行此操作，还是必须手动检查每个属性？理想情况下，将有一种获取元素的“属性内容”作为比较的方法。

Answer 1

您可以检查元素的outerHTML并检查从第一个<到>的文本（即标记和属性字符串）是否相同：

const elmToAttribString = elm => elm.outerHTML.match(/<[^>]+>/)[0];
const check = (elm1, elm2) => elmToAttribString(elm1) === elmToAttribString(elm2);

const [d1, d2, d3] = $('div');
console.log(check(d1, d2));
console.log(check(d1, d3));
console.log(check(d2, d3));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="A" width="200" height="200" style="stuff"></div>
<div id="A" width="300" height="300" style="differentstuff"></div>
<div id="A" width="200" height="200" style="stuff"></div>

不过，请注意，这会按照元素在HTML中列出的顺序检查元素的属性，而不是 properties （而且您实际上不应该拥有元素首先在单个文档中包含重复的ID-这是无效的HTML）。

如果属性可以按不同顺序排列或在它们之间具有不同的分隔符（例如，除了属性值对之间的单个空格以外的其他内容），则必须提取每个属性以进行检查，也许变换.attributes变成一个字符串对象：

const elmToAttribString = elm => JSON.stringify(
  [...elm.attributes]
    .map(({ name, value }) => ({ name, value }))
    .sort((a, b) => a.name.localeCompare(b.name))
);
const check = (elm1, elm2) => elmToAttribString(elm1) === elmToAttribString(elm2);

const [d1, d2, d3] = $('div');
console.log(check(d1, d2));
console.log(check(d1, d3));
console.log(check(d2, d3));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
first item has different order, weird spacing:
<div width="200" id="A"        height="200" style="stuff"></div>
<div id="A" width="300" height="300" style="differentstuff"></div>
<div id="A" width="200" height="200" style="stuff"></div>

jQuery / JavaScript：比较两个元素及其属性

1 个答案: