CODEWITHSUNDEEP
jqueryeach
loriensleafs
loriensleafs

Reputation: 2255

jquery plugging $(this) into a separate function

hey I have a function set up like so:

var smallerHeight_css = function() {
    var sizeVariable = ".06";
    var smallerHeight_height = DISCOVERY_GROUNDUP.groundupHEIGHT * sizeVariable;

    $(this).find(".groundup-hotspotCircle").css({
        height:smallerHeight_height,
        width:"auto"
    });     
    $(this).find(".groundup-hotspotPadding, .groundup-hotspotContent-container").css({
        height:smallerHeight_height 
    });
    $(this).find(".groundup-hotspotTitle").css({
        height:smallerHeight_height -5,
        width:smallerHeight_height - 5,
        borderRadius:smallerHeight_height,
        top:"50%",
        left:"50%",
        marginLeft:((smallerHeight_height -5) * ".5") * -1,
        marginTop:((smallerHeight_height -5) * ".5") * -1
    });
    $(this).find(".groundup-hotspotPadding").css({
        width:0
    });
    $(this).find(".groundup-hotspotContent-container").css({
        width:0
    });
};

I'd like to be able to call it in a .each function, but I'm not sure how to reference the $(this). Right now I have it set up like so and it doesn't work. Any help would be great!

if (DISCOVERY_GROUNDUP.groundupHEIGHT < DISCOVERY_GROUNDUP.groundupWIDTH) {
    $(".groundup-hotspot-container").each(function() {
        if ( $(this).hasClass("collapsed") ) {
            smallerHeight_css(); 
        } else if ( $(this).hasClass("expanded") ) {

        }
    });

}

Upvotes: 1

Views: 40

Answers (2)

EfrainReyes
EfrainReyes

Reputation: 991

On the context you're setting it, this on the smallerHeight_css function is probably the global object.

If you want to bind to each current element, you can try binding the element directly to the function, like so:

$(".groundup-hotspot-container").each(function() {
    if ( $(this).hasClass("collapsed") ) {
        (smallerHeight_css.bind(this))(); 
    } else if ( $(this).hasClass("expanded") ) {

    }
});

Using bind turns this in smallerHeight_css into the current element on the .each loop.

That works for the example you set up, though it'd be preferable to pass the element to the function.

Upvotes: 1

Josh Beam
Josh Beam

Reputation: 19802

Maybe pass in $(this) as a parameter:

if (DISCOVERY_GROUNDUP.groundupHEIGHT < DISCOVERY_GROUNDUP.groundupWIDTH) {
    $(".groundup-hotspot-container").each(function() {
        if ( $(this).hasClass("collapsed") ) {
            smallerHeight_css($(this)); 
        } else if ( $(this).hasClass("expanded") ) {
           //do something
        }
    });

}

                       //see the parameter, el?
var smallerHeight_css = function(el) {
    var sizeVariable = ".06";
    var smallerHeight_height = DISCOVERY_GROUNDUP.groundupHEIGHT * sizeVariable;

    el.find(".groundup-hotspotCircle").css({
        height:smallerHeight_height,
        width:"auto"
    });     
    el.find(".groundup-hotspotPadding, .groundup-hotspotContent-container").css({
        height:smallerHeight_height 
    });

    //.....etc....

Upvotes: 2

Related Questions