判断多个节点自定义属性值是否一样

最新推荐文章于 2022-01-11 14:55:33 发布

superXX07

最新推荐文章于 2022-01-11 14:55:33 发布

阅读量200

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/webhb/p/5755626.html

本文介绍了一个用于检查HTML元素自定义属性一致性的JavaScript函数dataAttr。该函数接收一个包含DOM节点的数组及自定义属性名作为参数，返回这些节点的指定自定义属性值是否完全相同。通过实际例子展示了其用法。

考虑到页面可能引入jquery，也加了判断。封装了一个dataAttr函数，需要传入两个参数。第一个参数：装有节点的数组或者伪数组，来判断这些数组的某个自定义属性值是否一致。第二个参数：自定义属性。返回值：true || false 。

上源码：

0	`<!DOCTYPE html>`
1	`<html lang="en">`
2	`<head>`
3	`<meta charset="UTF-8">`
4	`<title>Document</title>`
5	`</head>`
6	`<body>`
7	`<div data-xue="fh"></div>`
8	`<div data-xue="fh"></div>`
9	`<div data-xue="fh"></div>`
10	`<div data-xue="fh"></div>`
11	`<div data-xue="fh"></div>`
12	`<div data-xue="fh"></div>`
13	`<div data-xue="fh"></div>`
14	`<p data-xue="fh"></p>`
15	`<p data-xue="fh333"></p>`
16	`<p data-xue="fh"></p>`
17	`<span data-xue="fh"></span>`
18	`<script src="../test/node_modules/jquery/dist/jquery.js"></script>`
19	`<script>`
20	`var div = document.querySelector('div');`
21	`var p = document.querySelector('p');`
22	`var span = document.querySelector('span');`
23	`function dataAttr(arr,attr){`
24
25	`var arrAttr = [],`
26	`flag = true;`
27
28	`[].forEach.call(arr,function(v,i){`
29	`if(window.jQuery && v instanceof jQuery){`
30	`console.log('jquey对象');`
31	`v = v[0];`
32	`}`
33	`arrAttr.push(v.attributes[attr].nodeValue);`
34	`});`
35
36
37	`arrAttr.forEach(function(v,i){`
38	`if(arrAttr[0] != v){`
39	`flag = false;`
40	`}`
41	`})`
42
43	`return flag;`
44	`}`
45	`console.log(dataAttr($('div'),"data-xue")); // true`
46	`console.log(dataAttr($('p'),"data-xue")); // false`
47	`console.log(dataAttr([div,p,span],"data-xue")); // true`
48
49	`</script>`
50	`</body>`
51	`</html>`