Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Iterating over jQuery DOM elements in coffeescript: $(@). shortcut

I have a great many loops in my coffeescript that iterate over a collection of DOM elements, and execute more jQuery. These functions tend to look like this:

$('.iterable.object').each ->
    $(@).doThis
    $(@).doThat

    ## More complicated usage
    $(@).jqueryPluginCall
        x: $(@).data('attr1')
        x: $(@).data('attr2')

    ## More complicated usage
    $(@).children('ul.animateable').each ->
        if $(@).data('animation') is "fancy"
            $(@).animate fancy: animation
        else
            $(@).animate simple: animation
        $(@).focus(
            ->
                $(@).animate some: more
            , ->
                $(@).animate even: more
        ) ## Or however you do double callbacks

I made about 3 typos entering the $(@).'s again and again, and it's becoming a pain.

There isn't a shortcut syntax for $(@)? It's kind of a pain to type and seems like a pretty common syntax. It'd be cool if it operated similarly to @ as an automated function caller, like &doThis instead of &.doThis.

EDIT: I'd like to be able to define an alias right in javascript after jQuery loads that responds with the DOM element when called & and chains to methods &doThis, rather than at the top of each loop the way @bennedich suggests below.

like image 203
Chris Keele Avatar asked Aug 07 '12 18:08

Chris Keele


People also ask

How to iterate the loop over the DOM element in jQuery?

This blog refers you to use of $ (selector).each () function to iterate the loop over the DOM element in JQuery. $ (selector).each () function execute loop over a jQuery object and executing a function for each matched element in the document.

How do you iterate over a jQuery object?

Description: Iterate over a jQuery object, executing a function for each matched element. A function to execute for each matched element. The .each () method is designed to make DOM looping constructs concise and less error-prone. When called it iterates over the DOM elements that are part of the jQuery object.

What is the use of jQuery in CoffeeScript?

jQuery simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. Visit our jQuery tutorial to know about jQuery. We can also use CoffeeScript to work with jQuery. This chapter teaches you how to use CoffeeScript to work with jQuery.

How to iterate over all elements in Dom?

Run a loop and access them one by one by indexing (Eg. el [i] for i th element). Example: This example implements the above approach. + "iterate over all DOM elements.";


1 Answers

How about function chaining:

$('.iterable.object').each ->
  $(@)
    .doThis()
    .doThat()

Or storing $(@) to a variable:

$('.iterable.object').each ->
  t = $(@)
  t.doThis()
  t.doThat()

Or a combination of the two. Last thing I can think of is IDE snippets, e.g. textmate will let you configure letter+TAB be replaced by $(@).

like image 88
bennedich Avatar answered Sep 23 '22 21:09

bennedich