.all()

Description: Defines the end of an each-loop.

- no parameters -

Tip: The call to .all() is independent from the specific context at the time of invocation. Thus it allows to collect primitive values from each single element in an array-like jQuery object.


Usage pattern

$('.many').each().wait(event).all().doSome().jQueryStuff();
$('.many').each($).wait(event).all().doSome().jQueryStuff();
var valueArray = $('.some').each().attr(name).all().get();

Examples with ending for the each-loop

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);