Code24Lab
Menu
Courses Categories Guides Pricing Log in Sign up

jQuery Collections Recap: Filter, Count & addClass on the Hire Desk

Lesson 1 of 20Lab

All lessons
  1. jQuery Collections Recap: Filter, Count & addClass on the Hire DeskLabFree
  2. $.ajax Anatomy: Settings, Status Codes, Timeouts & parsererrorLab Locked
  3. $.getJSON and $.each: Rendering a JSON List into the PageLab Locked
  4. Promise Chains: .then Passes Values On, .done Does NotLab Locked
  5. Retrying Failed Requests with Exponential Back-offLab Locked
  6. $.when: Parallel Requests, the Slowest Wins, the First Failure Ends ItLab Locked
  7. serialize() and serializeArray(): What a Form Really SendsLab Locked
  8. Live Form Validation: Reading Values, Trimming and Range RulesLab Locked
  9. Submitting Forms with AJAX: Blocking Double SubmitsLab Locked
  10. Event Delegation: One Handler for Rows That Do Not Exist YetLab Locked
  11. Bubbling, Delegated Order and stopPropagationLab Locked
  12. Changing the DOM: append, remove, first() and Many TargetsLab Locked
  13. Building Rows Efficiently: One Insert Instead of HundredsLab Locked
  14. .data() vs .attr(): When jQuery Converts Your NumbersLab Locked
  15. $.map and $.each: Argument Order, Flattening and Breaking OutLab Locked
  16. Animation Timing: Durations, delay() and Parallel ElementsLab Locked
  17. The Effects Queue: Why Menus Keep Bouncing, and stop()Lab Locked
  18. .animate() and Easing: Where Is the Element at Time t?Lab Locked
  19. Debouncing a Live AJAX SearchLab Locked
  20. Final Project: The Live Hire-Desk PanelLab Locked

You are not signed in — the lab works, but your progress is not saved. Sign up

Lesson 1 of 20 is free. Unlock all 20 hands-on labs, the final exam and your certificate.

Buy course — CHF 19.90
Read first

The code in this lab

// Kestrel Cycle Hire – hire desk: one <tr class="booking"> per booking
var NOW = 17;                                     // current hour
var $rows = $('#bookings tr.booking');
var overdue = $rows
  .filter('[data-status="open"]')
  .filter(function () { return $(this).data('due') < NOW; })
  .addClass('overdue');
var deposits = 0;
$rows.filter('.ebike').each(function () {
  deposits += $(this).data('deposit');
});
$('#overdue-count').text(overdue.length);
Loading the lab…
Next lesson →