why we can't get object by value in jquery

Question

I am trying to set red color for all input with X value and small class.

but this code doesn't work.

$('.small[value="X"]').css('border','1px solid #F00');

html

    <input type="text" value="<?php echo trim($order['dns1']); ?>" class="wd-150 en small"  /><br />
    <input type="text" value="<?php echo trim($order['dns1']); ?>" class="wd-150 en small"  /><br />
    <input type="text" value="<?php echo trim($order['dns1']); ?>" class="wd-150 en small"  /><br />

is there any tip?

Answer 1

Using the attribute selector, [...], you're inspecting the attribute value, which is the value the input was given when created, not its actual value, which is a property of the input field.

You'd have to fall back to a filter:

$('.small')
    .filter(function() { return this.value == 'X'; })
    .css('border', '1px solid #F00');

Answer 2

Attribute selectors ([]) will only select elements which had that given attribute value in the markup when the page was loaded or set through .attr() which won't work in most cases (user-inputted values).

There's no such thing as a property selector yet so you will need a manual filter.

$('.small').filter(function() {
    return this.value === "X";
}).css('border','1px solid #F00');