the price is above $10. These are two filter conditions, so we need a filter
function:
1 $('#productsTable tbody tr').filter(function() {(^2) var genre = $(this).children('td:nth-child(3)').text();
(^3) var price = $(this).children('td:last').text().replace(/[^\d
.]+/g, '');
(^4) return genre.toLowerCase() == 'country' || parseInt(price) >=
10;
5 }).hide();
So, for each
price), respectively. We know the table has four columns, so we can target
column 4 with the :last pseudo-selector. For each product looked at, we
assign the genre and price to their own variables, just to keep things tidy.
For the price, we replace any characters that might prevent us from using
the value for mathematical calculation. If the column contained the value
$14.99 and we tried to compute that by seeing whether it matched our
condition of being below $10, we would be told that it’s not a number,
because it contains the $ sign. Hence we strip away everything that is not a
number or dot.
Lastly, we return true (meaning the row will be hidden) if either of our
conditions are met (i.e. the genre is country or the price is $10 or more).
filter()
8. .merge() vs. .extend()
Let’s finish with a foray into more advanced JavaScript and jQuery. We’ve
looked at positioning, DOM manipulation and other common issues, but