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

考虑到页面可能引入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>
posted @ 2016-08-10 10:10  黑白红尘  阅读(321)  评论(0)    收藏  举报