CODEWITHSUNDEEP
javascriptjquery
Kiranramchandran
Kiranramchandran

Reputation: 2094

Why do for loop executes before Jquery Selector in this code?

In the code below the for loop executes always first, the jQuery selector comes later. But I want to run this for loop after changing the value of the selected sliders.

$('div[name="FirstSliderselector"]').slider('value', $("#MasterSlider").slider("value"));
var FirstSliders = $('div[name="FirstSliderselector"]');
for (var i = 0; i < FirstSliders.length; i++) {
     console.log('for loop executed');
}

Upvotes: 2

Views: 199

Answers (2)

Chris GW Green
Chris GW Green

Reputation: 1213

Guaranteed to run the for loop after the slider assignment... 

var FirstSliders = $('div[name="FirstSliderselector"]'),
    MastSliderValue = $("#MasterSlider").slider("value");

function updateSliders(){
    FirstSliders.slider('value', MastSliderValue);
}

$.when(
    updateSliders()        
).done(
    function(){
        for (var i = 0; i < FirstSliders.length; i++) {
             console.log('for loop executed');
        }
    }
);

Thanks for -1 on first attempt guys ;) new to this.

Upvotes: 1

Derek Henderson
Derek Henderson

Reputation: 9706

Edited to reflect new understanding of the question

What you want to do is pass a callback function for the change event, like this:

What I now understand is that you want to trigger a change event when you change the value of the slider. You set the value programmatically somewhere with:

$('div[name="FirstSliderselector"]').slider('value', $('#MasterSlider').slider('value'));

In order for your for loop to execute after you've done this, you will need to have bound a change event to the slider, like this:

$('div[name="FirstSliderselector"]').slider({
    change: function (event, ui) {
        var firstSliders = $('div[name="FirstSliderselector"]'),
            i;
        for (i = 0; i < firstSliders.length; i += 1) {
            console.log(ui.value);
        }
    }
});

You can also do it like this:

$('div[name="FirstSliderselector"]').on('slidechange', function (event, ui) {
    var firstSliders = $('div[name="FirstSliderselector"]'),
        i;
    for (i = 0; i < firstSliders.length; i += 1) {
        console.log(ui.value);
    }
});

If you want to make sure this is only triggered when the value change is done programmatically and not after the slider slides, your callback function becomes this:

function (event, ui) {
    if (!event.originalEvent) {
        var firstSliders = $('div[name="FirstSliderselector"]'),
            i;
        for (i = 0; i < firstSliders.length; i += 1) {
            console.log(ui.value);
        }
    }
}

And finally, if none of these satisfy your needs, there is always, as suggested by Chris GW Green, the when-done construct:

$.when($('div[name="FirstSliderselector"]').slider('value', $('#MasterSlider').slider('value'));).then(function () {
    var firstSliders = $('div[name="FirstSliderselector"]'),
        i;
    for (i = 0; i < firstSliders.length; i += 1) {
        console.log('for loop executed');
    }
});

Upvotes: 4

Related Questions