.$(…)

Description: Just use a new jQuery selection to work with in the timed invocation chain.
… – miscellaneous parameters
any parameter accepted by the jQuery function itself.

Tip: With .end() you can switch back to the selection before.

See jQuery API for .$(…).

Other versions of $(…)

See also usage of ._

See also usage of then(…)

Examples with use new jQuery selection

Example #5: create dynamic tables with instant loops

Imagine you want to add very many table rows automatically so you can fill them with dynamic content.
E.g. a 30 x 200 sized table. Then you need only one callback method creating each cell. The rest is done via a single jQuery chain: 


function createCell(x,y) {
    $('<td>').text(x+':'+y).appendTo(this);
}

$.repeat().$('<tr>').repeat(createCell).until(30)
  .appendTo('tbody').until(200);
​
⇒
My dynamic data:

Example #13: quick image selection

In this example the user can choose an image by clicking on it. He can change his choice as often as he wants.

The "ready" button will always disable if last image is unselected. 

$("#choices").on('click','img')
    .add('.selected').toggleClass('selected')
    .$('#result').attr('disabled',false)
._.on('click','img.selected')
    .$('#result').attr('disabled',true);
​
⇒
Choose your preferred image:
​
  • Spaghetti Bolognese
  • Spaghetti Carbonara
  • Tortellini
  • Shrimps
  • Cake
  • Sweets
  • Coffee

Example #15: enable continue button only after making choices

In this example the continue button should get enabled only if for each choice the user has selected some value.

The used parallel .each()..all() loop waits for each line until some radio input is selected. Any order of making choices is allowed. 

$('.example .choices li')
  .each().children('input').wait('change').all()
  .$('#continue').fadeIn();
⇒
  • Color: red, green, blue
  • Size: XS, S, M, L, XL
  • Textile: wool, hemp, synthetic

Example #18: falling little boxes

This example first creates 25 little boxes with an inline definition: 
$('#boxparent').repeat().append('<div>').until(25)
  .children().hide();

These 25 boxes shall be animated as falling down with each button click.

A helper function is necessary to animate them in reverse order: 
$.fn.reverse = function() {
  return this.$(this.get().reverse());
}

Try clicking on that button multiple times during animation. With .stop(true,true) and .unwait() all animations are reset at the beginning. 

$('button').on('click').fadeTo('slow',0.3)
  .$('#boxparent div').stop(true,true).unwait()
  .css({top:-300}).show().reverse()
  .each($).animate({top:0},500).wait(100).all()
  .wait(500).fadeOut('slow')
  .$('button').wait(200).fadeTo('slow',1);
⇒
​