Question

I’m working on a simple client side interface where I have a jQuery object that I want to access directly when clicking on a hyperlink. Simplified code:

<div class="controls">
    <div class="score">
        <a class="button" href="/add">Add points!</a>
    </div>
</div>


$(".controls").myControls();

$.fn.myControls = function() {
    return $.extend(this, $.myControls).initialize();
}

$.myControls = {
    initialize: function() {
        this.scoreElement = $("div.score", this);
        this.linkElement  = $("a", this.scoreElement);

        this.scoreElement.score = 0;

        var _this = this;
        this.linkElement.click(function() {
            _this.clickHandler(this);
        });
    },
    clickHandler: function(element) {
        var scoreElement = $(element).parent();
        scoreElement.score = 1;
    }
}

Explanation: .controls element has .score element which doubles as a container for score information (this.scoreElement.score). When I click on a link within the .score element, I find the parent element, which is the same element in the DOM as this.scoreElement and try to set its score property to 1. Obviously, this won’t work, as the local scoreElement.score property in the clickHandler method is “undefined”.

So here’s my question: is there a simple way to access my this.scoreElement object directly through traversing the DOM with jQuery?

Surely I can check if this.scoreElement == $(element).parent() in some way and then access the right property in my this.scoreElement object, but direct access would be more elegant and robust. Is this possible? Am I going at it the wrong way? Thanks!

PS: Ignore the fact I use parent() to find the scoreElement, I only use it to illustrate my problem. Unless it is part of the problem, in that case don’t ignore 🙂

Answer 1

While it’s certainly possible to use your own ‘control-object’ to store the related data, I usually prefer to rely on jQuery doing it – with .data() method, like this:

$(this.scoreElement).data('score', 0); // in initialize()
$(this).parent().data('score', 1); // in clickHandler()

This approach allows me to scale more easily, as I never have to fear ‘overlapping’ issues, using a single ‘control’ object rather than object-for-element.