CODEWITHSUNDEEP
jqueryloops
Amin Abdolrezapoor
Amin Abdolrezapoor

Reputation: 1847

Jquery Loop stops after 2nd element

I am trying to check to see if one of these radio boxes is checked and, if it is, to uncheck it and check the next in line.

I'd like to repeat this process every 4 seconds.

<section class="cr-container">
<input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1 radio-set" checked/>
<input id="select-img-2" name="radio-set-1" type="radio" class="cr-selector-img-2 radio-set" />
<input id="select-img-3" name="radio-set-1" type="radio" class="cr-selector-img-3 radio-set" />
<input id="select-img-4" name="radio-set-1" type="radio" class="cr-selector-img-4 radio-set" />
</section>

i tried something like this but it's not working

$(".cr-container input").each(function(){
    setTimeout( function () {
        requestFunction(data, function(status){
            if ( status == 'OK' ) { 
                if ($(this).attr('checked')) {
                    $(this).next().prop('checked', true);
                }
            }
        });
    }, indexInArray * 400);
});

Upvotes: 0

Views: 78

Answers (2)

Enrique Fueyo
Enrique Fueyo

Reputation: 3488

As pointed by @b_dubb, the problem is the in scope since $(this) after two callbacks is no longer the element you wanted.

Try something like that:

$(".cr-container input").each(function(){
    self = this
    setTimeout( function () {
        requestFunction(data, function(status){
            if ( status == 'OK' ) { 
                if ($(self).attr('checked')) {
                    $(self).prop('checked', false); //You wanted to uncheck current element, didn't you?
                    $(self).next().prop('checked', true);
                }
            }
        });
    }, indexInArray * 400);
});

Regarding the 4 sec interval, indexInArray * 400 does not do what you want. Do you want to cheack all elements every 4 secs of do you want to check one element each 4 secs?

BTW a console.log($(this)) might have helped you

EDIT

Since elementcs are radio buttons and not checkboxes there's no need to uncheck the current element, so you can easily omit the line:

$(self).prop('checked', false); //You wanted to uncheck current element, didn't you?

Which would be needed only if the elements were check boxes (multiple select allowed)

Upvotes: 1

Pedro Estrada
Pedro Estrada

Reputation: 2419

Let me know if this is what you were looking for:

Here is the jsfiddle: http://jsfiddle.net/BTuaS/

setInterval(repeatProcess, 4000);

function repeatProcess() {
    $(".cr-container input").first().prop('checked', true);
    $(".cr-container input").each(function(i){
        var self = $(this);
        setTimeout( function () {
            requestFunction("", function(status){
                if ( status == 'OK' ) { 
                    if (self.prop('checked')) {
                        self.next().prop('checked', true);
                    }
                }
            });
        }, (i + 1) * 1000);
    });
}

function requestFunction(data, status){
    status('OK');
}

Upvotes: 0

Related Questions