javascript - jQuery/JavaScript : compare two elements and their attributes

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 中列出的顺序检查元素的属性，而不是属性(并且您确实不应该拥有元素首先在单个文档中存在重复的 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>