Correct syntax for $(this)

Question

I have a jquery function where I repeat the .red way too many times.

I would like to replace them for $(this) instead, but I don't know the correct way to do it apparently.

$(".red").ready(function () {
    $(this).addClass("active");
});

http://jsfiddle.net/LGDz2/

This is a simplified version of the code and how I'd want it to behave, hope it makes sense to you guys.

The idea here is to be able to replace that initial .red and have it apply on all the lines of code I add inside the function.

Regards.

EDIT: I was trying to simplify it to the maximum because I use to get lost in complex explainations and because I'm kind of embarrased posting my crappy code lol, here is the code I want to optimize:

function showRed() {
    $(".red").show();
    if (position == 0) {
        $(".red").css({opacity : "0", left: "0"}).transition({opacity:1}, 500, ezin);
    } else if (position < 1){
        $(".red").css({left : "100%", });
    } else if (position > 1) {
        $(".red").css({left : "-100%", });
    }
    position = 1;
    goodbye();
    $(".red").css({scale: "1"}).transition({left:0}, 500, ezin).addClass("active");
}

function showGreen() {

    $(".green").ready(function(){
        $(".green").show();
        if (position == 0) {
            $(".green").css({opacity : "0", left: "0"}).transition({opacity:1}, 500, ezin);
        } else if (position < 2){
            $(".green").css({left : "100%", });
        } else if (position > 2) {
            $(".green").css({left : "-100%", });
        }
        position = 2;
        goodbye();
        $(".green").css({scale: "1"}).transition({left:0}, 500, ezin).addClass("active");
    });

}

What I want is to optimize all this so I don't have to write this code for every single slide. I'm using jQuery transit by the way, transition is pretty much like animate in here.

It's the same for showBlue too.

And this is how it works: http://dlacrem.16mb.com/dlatest/positions.html

Answer 1

You need to use:

$(document).ready(function () { 
    $(".red").addClass("active");
});

Above code will add class active to your div with class red on page load.

The .ready() method can only be called on a jQuery object matching the current document

Answer 2

Looking at your code the first thing you would want to do as a step by step on how to do it yourself is refactor out all your uses of $(".green") into a local variable.

This would give:

function showGreen() {
    var element = $(".green");
    element.show();
    if (position == 0) {
        element.css({opacity : "0", left: "0"}).transition({opacity:1}, 500, ezin);
    } else if (position < 2){
        element.css({left : "100%", });
    } else if (position > 2) {
        element.css({left : "-100%", });
    }
    position = 2;
    goodbye();
    element.css({scale: "1"}).transition({left:0}, 500, ezin).addClass("active");
}

This is the same sort of refactoring that you might do when you would want to remove any kind of variable.

What you do after that depends on how you are calling these functions. Standard refactoring would then involve just promoting it to a function parameter and observing that at this stage showGreen and showRed would be the same (assuming there are no minor differences in properties I've not noticed).

function show(element) {
    element.show();
    if (position == 0) {
        element.css({opacity : "0", left: "0"}).transition({opacity:1}, 500, ezin);
    } else if (position < 2){
        element.css({left : "100%", });
    } else if (position > 2) {
        element.css({left : "-100%", });
    }
    position = 2;
    goodbye();
    element.css({scale: "1"}).transition({left:0}, 500, ezin).addClass("active");
}

you could then call this as show($('.red')) or show($('.green')).

Alternatively if you want to call it more like:

$('.red').click(showRed);

Then you could change the function to start

var element = $(this)

and that should do what you want.

Answer 3

Are you just looking for something like that ?

$(document).ready(function () {
    var $red = $('.red');
    $red.addClass("active");
    $red.somethingelse();
});

Answer 4

Something like this?:

$(document).ready(function () { 
    function updateRed($class) {
        $class.addClass("active");  
    }
    var $red = $('.red');
    updateRed($red);
});

http://jsfiddle.net/LGDz2/2/

Answer 5

Your issue is that in your code this is referring to document object. That's because ready pseudo event is bound to document, unregarding any oject used to bound this pseudo event.

So indeed, looks like you want:

$(document).ready(function(){
    var $reds = $('.red'); 
    // then you can use $reds inside this ready handler scope
});