What is the difference between element and this in jQuery function $ .each

Question

What is the difference between element and this in jQuery function $ .each

Navigation

#1 by (2 votes)

1

During the development I doubt the correct use of some tools, among them is the use in a $.each of jQuery element and this , see example:

$(document).ready(function() {
  var $app = $('#app1'),
      $app2 = $('#app2');

  $app.each(function(index, element) {
    var $element = $(element);
    
    $element.addClass('color1');
  });
  $app2.each(function() {
    var $this = $(this);
    
    $this.addClass('color2');
  });

});

.app {
  display: inline-block;
  width: 120px;
  height: 120px;
}
.color1 {
  background-color: #000;
}
.color2 {
  background-color: #dfdfdf;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><divid="app1" class="app"></div>
<div id="app2" class="app"></div>

I wanted an explanation and what would be the best method to use.

jquery

asked by anonymous 09.09.2016 / 03:03

1 answer

Proportions of an image resized with OpenCV? Insert in HTML and with AngularJS functions

score 2 · Accepted Answer

There is no difference between the two, as described in:

Each time the callback runs, it is passed the current loop iteration, beginning from 0. More importantly, the callback is fired in the context of the current DOM element, so the keyword refers to the element.

The only time that element (or second argument) might be better than this is if you pass to an anonymous function, for example if you do this:

$("div").each(function (i) {
    setTimeout(function () {
         console.log(this.className);
    }, 200);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><divclass="a"></div>
<div class="b"></div>
<div class="c"></div>

The this.className will return undefined , this is because when using this in another function as the example causes this to be equal to global object, ie in browsers this will be% the same as the object window. (if it is Node.js it will be the object global. );

But if you do this will work:

$("div").each(function (i, element) {
    setTimeout(function () {
         console.log(element.className);
    }, 200);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><divclass="a"></div>
<div class="b"></div>
<div class="c"></div>

Extra

Note that this and the second parameter (element) return the DOM, but you can use any of them to manipulate with jQuery in this way:

$("div").each(function (i, element) {
    var el = $(this); //ou $(element)

    setTimeout(function () {
         console.log(el.attr("class"));
    }, 200);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><divclass="a"></div>
<div class="b"></div>
<div class="c"></div>

You can also use the index (first parameter) to associate the index with other things, for example:

var rightList = $(".right .item");

$(".left .item").each(function (index) {
    var el = $(this);

    setTimeout(function () {
         rightList.eq(index).text(el.text());
    }, 1000 * (index + 1));
});

.left {
float: left;
}

.right {
float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><divclass="left">
    <div class="item">A 1</div>
    <div class="item">A 2</div>
    <div class="item">A 3</div>
</div>

<div class="right">
    <div class="item">Vazio</div>
    <div class="item">Vazio</div>
    <div class="item">Vazio</div>
</div>