jQuery: Setting string for function call

Question

My code seems flawed, I'm setting two functions with the same code inside. Can I combine them into one?

// remove sets
$('body').on("click", "span.remove", function() {

    var self  = $(this),
        total = self.parents('ul').children('li').size(); // grab total number of li's

    // remove (set) li if total greater than 1, else remove exercise
    if(total > 1)
        self.parent('li').fadeOut('slow', function() {

            // remove clicked .li and reset list order
            $(this).remove();
            reset();

        });

    else
        self.parents('section').fadeTo('slow', 0.33).slideUp('slow', function() {

            // remove clicked .li and reset list order
            $(this).remove();
            reset();

        });

});

Is it possible to do something like:

if(total > 1)
    var f = self.parent('li').fadeOut('slow', function()

else
    var f = self.parents('section').fadeTo('slow', 0.33).slideUp('slow', function()

f {

    // remove clicked .li and rest list order
    $(this).remove();
    reset();

});

Sure, just pass f instead of function(){ ...

bfavaretto
– bfavaretto

2013-01-18 14:56:50 +00:00
Commented Jan 18, 2013 at 14:56 — bfavaretto
– bfavaretto, Commented Jan 18, 2013 at 14:56

WickyNilliams · Accepted Answer · 2013-01-18 15:01:02Z

The trick is to create a named function, instead of an anonymous function. A named function can then be passed around by reference, including as a parameter to other methods. There are two ways to do this, either as an expression (function someName(){..}) or an assignment (var someName = function() {..}). Which you choose is mainly personal preference, they are effectively the same.

An example (using a function expression), following on from your question below:

$('body').on("click", "span.remove", function() {

    function removeAndReset() {
            // remove clicked .li and reset list order
            $(this).remove();
            reset();
    }

    var self  = $(this),
        total = self.parents('ul').children('li').size(); // grab total number of li's

    // remove (set) li if total greater than 1, else remove exercise
    if(total > 1)
        self.parent('li').fadeOut('slow', removeAndReset);

    else
        self.parents('section').fadeTo('slow', 0.33).slideUp('slow', removeAndReset);

});

t.niese · Accepted Answer · 2013-01-18 15:01:01Z

0

$('body').on("click", "span.remove", function() {

    var self  = $(this),
        total = self.parents('ul').children('li').size(); // grab total number of li's

    function remove() {
        $(this).remove();
        reset();
    }
    // remove (set) li if total greater than 1, else remove exercise
    if(total > 1)
        self.parent('li').fadeOut('slow', remove);

    else
        self.parents('section').fadeTo('slow', 0.33).slideUp('slow', remove);

});

answered Jan 18, 2013 at 15:01

t.niese

41k9 gold badges78 silver badges111 bronze badges

Collectives™ on Stack Overflow

jQuery: Setting string for function call

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related