Question

say I have the following function:

function checkPanes() {
    activePane = '';
    var panels = $("#slider .box .panel");

    panels.each(function() {

    //find the one in visible state.
    if ($(this).is(":visible")) {
    activePane = $(this).index()+1;
    console.log(activePane);
    }

    });
} //END checkPanes();

Ideally, I’d like to call on this function elsewhere (most likely from another function),
and retrieve the value I am currently outputting to console.

(example ..)

function exampleCase() {
    checkPanes(); //evidently, does not return anything. 
    //Ideally, I want the numerical value, being output to console in above function.
}  

Thanks in advance! All suggestions / comments are well appreciated.
Cheers

Answer 1

Forget everyone who says return activePane since they didn’t see it’s in a jQuery each loop. Won’t work.

I’d suggest restructuring your selector. The selector you should be using is: $("#slider .box .panel:visible"). This will cut out your each loop entirely. For instance you could restructure the code as follows:

function checkPanes() {
    return $("#slider .box .panel:visible").index();
}

function exampleCase() {
    var visiblePane = checkPanes();

    // ... do something with the index
}

I’d suggest just using the selector in-line rather than making a new function, but that’s a matter of taste, especially if you have to select the same thing in multiple places.