jQuery - Get a selection based on value

Question

I'm sure this is painfully simple but I just can seem to find it.

I need to get a selection of textboxes from their value. I don't need the value, I need the elements. I want something like:

$(".ProductCode [value:'hideme']").hide();

I end up with

unrecognized expression: [value:'hideme']

btw,

$(".ProductCode").each(function() { if ($(this).val() == 'hideme') $(this).hide(); });

Is working but it doesn't seem very clean.

Answer 1

Try:

$(".ProductCode[value='hideme']").hide();

See Attribute Equals Selector in the jQuery docs for more details.

Answer 2

Use the attribute equals selector of jQuery

$(".ProductCode[value='hideme']").hide();

To be more precise, you could also use the multiple attribute selector:

$("input[class='ProductCode'][value='hideme']").hide();

The difference between the two is that the first selects all elements with a certain class and value. The second only selects all INPUTs with a certain class and value.

This selectors will select all of the applicable elements. So that hide() function will hide all of the elements. So there is no need to "manually" iterate through the selected elements with each() or other things.. hide() automatically does that for you.

Here is a live example.