如何使用选择器在jQuery的foreach循环中定位每个孩子

Question

I'm using Jquery and I want to use selector to locate each child in a foreach loop:

   $('div.parents').children('a').each(function(i) {
        setTimeout(function(){
            $(this).trigger( "click" );
        },2000 + i * 2000); 
    });

However, $(this) seems not work at all. The list looks like this: And if I change $(this).trigger( "click" ); to $('a').trigger( "click" ); it will open all the links at once.

<div class="parents">
<a class="child"></a> 
<a class="child"></a> 
<a class="child"></a> 
...
</div>

Thanks for your help!

Answer 1

To let this inside setTimeout points to this outside of setTimeout ,

you can use jQuery's $.proxy :

$('div.parents').children('a').each(function(i) {
        setTimeout($.proxy(function(){
            $(this).trigger( "click" );
        },this),2000 + i * 2000); 
    });

Or .bind [works only in browsers compatible with ECMAScript 5 ]:

$('div.parents').children('a').each(function(i) {
        setTimeout(function(){
            $(this).trigger( "click" );
        }.bind(this),2000 + i * 2000); 
    });

Answer 2

The problem is this inside the setTimeout callback does not point to the clicked element, you can use a closure variable to fix this issue

$('div.parents').children('a').each(function(i) {
    var $this = $(this)
    setTimeout(function(){
        $this.trigger( "click" );
    },2000 + i * 2000); 
});