jquery using (this) in custom function

Question

I created a little jquery script and I have a problem to use (this) in a custom function.

This is the code:

jQuery("li").click(function()
{
    var scrollTop = jQuery(window).scrollTop();
    if(scrollTop > 0)
    {
        jQuery('html, body').animate( { scrollTop: 0 }, 'slow', function()
        {
            fadeItems();
        });

    }
    else
    {
        fadeItems();    
    }

});

function fadeItems()
{       
    var slogan = jQuery(this).children('p').html();

    jQuery('#slogan_text').fadeOut(150, function(){
        jQuery('#slogan_text').fadeIn(150).html(slogan);
    });

    var content = jQuery(this).children('#post_content_large').html();
    jQuery('#content_view').html(content).hide();

    var status = jQuery("#readMore").html();

    if(status == 'Verbergen')
    {
        jQuery('#content_view').fadeIn(500, function(){
            jQuery('#content_view').fadeIn(500).html(content);
        });
    }

    var title = jQuery(this).children('h3').html();

    jQuery('#title_content').fadeOut(150, function(){
        jQuery('#title_content').fadeIn(150).html(title);
    });
}

So the function runs when clicking on a list items and that goes wel but the values of (this) is empty

Somebody know how to fix this?

Thanks in advance!

user400654 · Accepted Answer · 2012-04-26 14:25:56Z

2

.call can be useful here:

jQuery("li").click(function () {
    var self = this;
    var scrollTop = jQuery(window).scrollTop();
    if(scrollTop > 0) {
        jQuery('html, body').animate( { scrollTop: 0 }, 'slow', function() {
            fadeItems.call(self);
        });    
    }
    else {
        fadeItems.call(self);
    }    
});

answered Apr 26, 2012 at 14:25

user400654

95.1k16 gold badges168 silver badges188 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nicola Peluchetti · Accepted Answer · 2012-04-26 14:33:00Z

2

Because you must pass it to the function so that it can use it (also maybe use domething different from this, is less confusing (EDITED since you want the clicked item)

    var clicked = this;
    jQuery('html, body').animate( { scrollTop: 0 }, 'slow', function()
    {
        fadeItems(clicked);
    });

function fadeItems(el)
{       
var slogan = jQuery(el).children('p').html();

edited Apr 26, 2012 at 14:33

answered Apr 26, 2012 at 14:22

Nicola Peluchetti

77k32 gold badges151 silver badges197 bronze badges

1 Comment

user400654 Over a year ago

this in that case is not the element he's looking for.

Evan Davis · Accepted Answer · 2012-04-26 14:33:44Z

2

Use apply:

fadeItems.apply(this);

That way you can specify the context for the function call (manually assigning the value of this in fadeItems)

EDIT: as noted by @KevinB, you will need to alias this in the parent function: var that = this;, and then pass that into the function, fadeItems.apply(that);.

edited Apr 26, 2012 at 14:33

answered Apr 26, 2012 at 14:24

Evan Davis

36.7k7 gold badges53 silver badges58 bronze badges

2 Comments

user400654 Over a year ago

That works great in the else {}, but within the animate this refers to the html and body elements

Evan Davis Over a year ago

Ah, good catch. Principle is the same, but you need to store the context in the parent scope.

Collectives™ on Stack Overflow

jquery using (this) in custom function

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related