Jquery Loop stops after 2nd element

Question

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);
});

possible scope problem. you have a function within a function within a function. what do you expect this to refer to? can you set up a jsfiddle for testing please — b_dubb
– b_dubb, Commented Oct 24, 2013 at 16:37
Forget about the jquery i just posted , it seems to be so wrong , can u please give me a code which i can do what i want with it — Amin Abdolrezapoor
– Amin Abdolrezapoor, Commented Oct 24, 2013 at 16:45

Enrique Fueyo · Accepted Answer · 2013-10-24 17:02:20Z

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)

Pedro Estrada · Accepted Answer · 2013-10-24 16:56:17Z

0

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');
}

answered Oct 24, 2013 at 16:56

Pedro Estrada

2,4192 gold badges17 silver badges24 bronze badges

1 Comment

Pedro Estrada Over a year ago

Happy to help. If this answer or any other one solved your issue, please mark it as accepted. Thanks :)

Collectives™ on Stack Overflow

Jquery Loop stops after 2nd element

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related