Question

another challenge – this is more for cleaner looking code than a “how do I”. Here’s the idea.

<section id="projector" data-start-at="7">....</section>

in JS

$('#projector').projector_slider({'startFrom' : parseInt( REF TO DATA-START-AT )});

I am calling a custom function on a HTML element. Simple. The function has an option called “startFrom” indicated by an INT. The INT is stored in an attribute attached to the HTML element. What I want is to NOT have to find $('#projector') in the DOM again.

Is there a way I can get a reference to the Projector inside the function call – something like $(this).attr('data-start-at)?

Obv I can solve this by looking up the element again and accessing it directly, Im asking the question in the hopes of learning a new ‘this’ reference trick while cleaning up my JS.

Answer 1

No, you can’t. You should save $('#projector') in a var and use it:

var projector = $('#projector');

projector.projector_slider({
    startFrom: parseInt(projector.data('start-at')),
});

Notice that I use [.data()][data] instead of .attr('data-*'). The data() function is created by jQuery and is a smart way to interact with data-* attributes. For instance, if you have data-first=true and use .data('first') you will get a boolean ‘true’ and if you have data-children="['foo', 'bar']" you will get an object if you use .data('children').