jquery .each

.each()

.each( function )Returns: jQuery

Description: Iterate over a jQuery object, executing a function for each matched element.

• version added: 1.0.each( function )

  • function
    Type: Function( Integer index, Element element )
    A function to execute for each matched element.

The .each() method is designed to make DOM looping constructs concise简洁 and less error-prone.

When called it iterates over the DOM elements that are part of the jQuery object.

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 this refers to the element.

Suppose you have a simple unordered list on the page:

 

Why does iterating over jQuery objects with .each() not give me jQuery objects?

Possibly due to performance reasons related to looping over large collections? If you only need the DOM objects, then you save cycles. If you need the jQuery object, then you can easily get that.

I typically don't provide the 2nd parameter to each, so I can use $(this).

 

示例代码，访问this的话，是一个dom对象。要访问jQuery对象需要按照$(this)

var previews = $('.preview')
$.each(previews, function(){
console.log(this);
console.log($(this));
});

也可以在函数里面指定index和data进行访问。这里的data是指集合里的元素

var previews = $('.preview')
$.each(previews, function(index,item){
console.log(index);
console.log($(item).data('data'));
});