Menu
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.
203
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.
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.
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.
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.";
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 $(@).
88
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
