zoukankan      html  css  js  c++  java
  • JavaScript获取数组索引

    JavaScript获取数组索引:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>let相关例子</title>
        </head>
        <body>
            <button class="btn">按钮1</button>
            <button class="btn">按钮2</button>
            <button class="btn">按钮3</button>
            <button class="btn">按钮4</button>
        </body>
        <script src="js/jquery-2.1.0.js"></script>
        <script type="text/javascript">
            // 获取元素
            var btns=$(".btn");
            // 方法一:each遍历数组每一个索引(推荐使用)
            $.each(btns,function(i){
                btns.eq(i).click(function(){
                    console.log("采用each获取节点索引:"+i);
                });
            })
           
           // 方法二:for循环采用闭包获取每个节点的索引
           for(var i=0;i<btns.length;i++) {
              (function(i){        
                   btns.eq(i).click(function () {
                       console.log("采用闭包获取节点索引:"+i);
                   })   
              })(i); 
           } 
            // 方法三:es6遍历索引
            for (let i = 0; i < btns.length; i++) {
                btns.eq(i).click(function(){
                    console.log("采用es6获取节点索引:"+i)
                });
            }
            
            // 方法四:原生js获取
            var btn=document.querySelectorAll(".btn");
            for (var i = 0; i < btn.length; i++) {
                // 给每个btn索引值
                btn[i].index=i;
                btn[i].onclick=function(){
                    console.log("js遍历节点索引"+this.index)
                }
            }
        </script>
    </html>
  • 相关阅读:
    解惑开源项目协作流程
    结合webpack 一步一步实现懒加载的国际化简易版方案
    SEO优化之——hreflang(多语言网站优化)
    pandas数据分析常用
    多任务: 多进程与多线程
    linux基础知识
    python常用模块之sys, os, random
    递归函数(初级难点)
    内置函数
    函数
  • 原文地址:https://www.cnblogs.com/xiaozhou223/p/11730422.html
Copyright © 2011-2022 走看看