zoukankan      html  css  js  c++  java
  • 判断多个节点自定义属性值是否一样

    考虑到页面可能引入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>
  • 相关阅读:
    安装node和npm
    安装git
    常用软件
    vscode常用插件
    git生成ssh key
    04.接口初始化规则与类加载器准备阶段和初始化阶段的意义
    03.编译期常量与运行期常量的区别与数组创建本质分析
    02.常量的本质含义与反编译及助记符
    01.类加载,连接与初始化过程
    HTTP 状态码大全
  • 原文地址:https://www.cnblogs.com/webhb/p/5755626.html
Copyright © 2011-2022 走看看