Show/hide table row based on value of a cell

Question

I am using the range slider from JQuery-UI (http://jqueryui.com/slider/#range) which a user uses to pick a price range, and I want to show/hide table rows depending on whether or not they fall inside the range selected by the user.

This is what I have found from other answers: the following code hides the table row that has a cell in column 9 containing the value 10.

$("tr").find("td:nth-child(9):contains(10)").parent().hide();

What I am trying to do is "hide where the value in the cell is less than 10".

I have tried the following:

$("tr").find("td:nth-child(9):lt(10)").parent().hide();

But ":lt" is a method that applies to indexes, not values (I think).

Can anyone help me out please?

Answer 1

Using some of your code from above, you could probably do something similar to this:

for(var i = 0; i < 10, i++) {
   $("tr").find("td:nth-child(9):contains(" + i + ")").parent().hide();
}

You may have to add a few things to get what you need, but I think this should point you in the right direction!

Answer 2

You're not going to be able to do this with selectors alone. You can use .filter for more specific functionality:

$("tr").find("td:nth-child(9)").filter(function () {
   return parseInt($(this).text()) < 10;
}).parent().hide();

A brief note that :contains doesn't work very well for your first example either since it will apply to elements that contain "100."