Your First jQuery Query: $(), .length and .each()
All lessons
- Your First jQuery Query: $(), .length and .each()Free
- Element, #id, .class and Grouped Selectors Locked
- Attribute Selectors: ^=, $=, *= and [attr] Locked
- Descendant, Child and Sibling Selectors Locked
- Picking by Position: .first(), .eq(), .slice() and .even() Locked
- Narrowing a Set: .filter(), .not() and .is() Locked
- Moving Up and Down: .closest(), .parent(), .find() and .children() Locked
- Sideways: .next(), .prev(), .siblings() and .index() Locked
- Chaining and .end(): Following One Long Statement Locked
- Reading Content: .text(), .html() and .val() Locked
- Attributes, Properties and data: .attr(), .prop(), .data() Locked
- CSS and Sizes: .css(), .width(), .innerWidth(), .outerWidth() Locked
- Classes: .addClass(), .removeClass(), .toggleClass() Locked
- Building the Page: .append(), .before(), .clone(), .remove() Locked
- Handling Events: .on(), .off() and .one() Locked
- Event Bubbling and Delegation Locked
- The Event Object: e.target, this and preventDefault() Locked
- Forms: .val(), :checked and .serializeArray() Locked
- Effects and the Animation Queue Locked
- Utilities and Speed: $.map(), $.each() and Cached Sets Locked
- Final Project: The Fernwood Cart Page Locked
You are not signed in — the lab works, but your progress is not saved. Sign up
Read first
The code
// products.js – Fernwood Trail Co. catalog page
$(function () {
var $items = $('.product');
var total = 0;
$items.each(function () {
total += $(this).data('price');
});
console.log($items.length, total, total / $items.length);
var saleTotal = 0;
$('.product.sale').each(function () {
saleTotal += $(this).data('price');
});
$('.sale').addClass('highlight');
});The rows are the page's elements in document order. A selector never changes that order: .each() visits them top to bottom.
Loading the lab…