有关 each() 方法和 index 索引值的问题 #3

GitHuboooSHY · 2019-05-30T09:43:21Z

下方代码是给div添加样式并在某一个div处设置条件赋予 “return false” 来
停止循环。

问题一：为什么.each(function(i)中的i不用声明就可以使用，它是一个形参吗，为什么默认就是div的索引值？

问题二：参考代码中的domEle是一个实参吗，他和我用的$(this)有区别吗。另外我把$(this).css 改成 this.css就不行了，this取得是一个dom对象，css不就是它的属性吗？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- jQuery (V1.11.0) -->
    <script src="/new/libs/jquery/jquery.min.js"></script>
    <style>
        div {
            width: 400px;
            background-color: aquamarine;
            height: 170px;
        }
    </style>
</head>
<body>
    <!-- <img>
    <img> -->
    <button>start</button>
    <span></span>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div id="stop" ></div>
    <div></div>
    <script>
        // $('img').each(function(i){
        //     var e = i+1
        //     this.src = '../images/img_3trends_' + e + '.png' 
        // })

        $('button').click(function(){
            $('div').each(function(i){
                $(this).css('backgroundColor','yellow');

                if($(this).is('#stop')){
                    $('span').text('Stopped at div index' + i);
                    return false;
                }
            })
        })
        
        //下方为参考代码
        // $("button").click(function () {
        //     $("div").each(function (index, domEle) {
        //         // domEle == this 
        //         $(domEle).css("backgroundColor", "yellow");
        //         if ($(this).is("#stop")) {
        //             $("span").text("Stopped at div index #" + index);
        //             return false;
        //         }
        //     });
        // });
    </script>
</body>
</html>

turkyden · 2019-06-01T00:56:50Z

@GitHuboooSHY 你提出的问题非常好！

Q&A：

这实质上是一个匿名函数当成一个变量整体传入另一个叫做 each 的函数的问题：

$('div').each(function(i) {
  // 打印所取到的 div 集合中的每一项
  console.log(i)
})

我们将其分解成以下结构：

// 声明一个叫做 print 的具名函数，当前不调用
function print(i) {
  console.log(i)
}
// or
var print = function (i) {
  console.log(i)
}

// jquery 库内部的定义-简略版
window.$ = function(seletor) {
  // 对 seletor 表达式 ‘#xxx’ ‘.xxx’ 解析并 DOM
  var divArray = ['div1', 'div2'];
  return {
    ajax: function() { },
    css: function() { }，
    each: function(callback) {
       for(var i=0; i<divArray.length; i++) {
       // 在这里取出每一项 i 传递给回调函数，并执行该回调函数
       callback(i)
      }
    }
  }
}

// 将 print 函数作为参数传入给 jquery 的工具函数 each()
$('div').each(print);
// 在每次遍历的时候帮助我们执行掉打印功能

这个时候，对于 each() 函数来说，callback 是形参，print 才是真正传入的实参

注：函数本身也是一种类型，和字符串 “”，对象 { } ，数组 [] 一样是可以被声明，被传递的。

GitHuboooSHY changed the title ~~有关each（）方法和index索引值的问题~~ 有关 each() 方法和 index 索引值的问题 May 31, 2019

turkyden added the question Further information is requested label Jun 12, 2019

turkyden assigned turkyden and GitHuboooSHY Jun 12, 2019

turkyden pinned this issue Jun 12, 2019

turkyden added question Further information is requested and removed question Further information is requested labels Jun 12, 2019

turkyden assigned blankyl Jun 12, 2019

turkyden unpinned this issue Jun 19, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

有关 each() 方法和 index 索引值的问题 #3

有关 each() 方法和 index 索引值的问题 #3

GitHuboooSHY commented May 30, 2019 •

edited by turkyden

Loading

turkyden commented Jun 1, 2019 •

edited

Loading

有关 each() 方法和 index 索引值的问题 #3

有关 each() 方法和 index 索引值的问题 #3

Comments

GitHuboooSHY commented May 30, 2019 • edited by turkyden Loading

turkyden commented Jun 1, 2019 • edited Loading

Q&A：

GitHuboooSHY commented May 30, 2019 •

edited by turkyden

Loading

turkyden commented Jun 1, 2019 •

edited

Loading