jQuery value selector

I have:

<button class="Delete" value="1">Delete</button>
<button class="Delete" value="2">Delete</button>
<button class="Delete" value="3">开发者_如何学JAVA;Delete</button>

Given variable X that contains a value (in this case either a 1, a 2 or a 3), then how do I hide the button corresponding to the value in X?

I want to say something like:

$('button').val(x).hide();

Meaning: "The button whose value is x, hide".

$('button[value="' + x + '"]').hide();

You can write your own custom selector (I just felt someone should mention it). Could look like:

(function($) {
    $.extend($.expr[':'], {
         val: function(elem, i, attr) {
             return elem.value === attr[3];
         }
    });
}(jQuery));

$('button:val(2)').hide();

You'd do that inside of the actual selector:

$('button[value="foo"]').hide();

This would require concatenating x into an xpath, but i can't think of another way right now.

$(button[value='1']).hide();

EDIT: removed @, apparently deprecated, much like myself :)

You don't even have to manually assign values to buttons:

var i = 0; $('.Delete').attr('value', function() {i++;    return ''+i;});

will do it fou you. Now you have your buttons values counted. But nevermind, (you don't even need values!) You can hide 'THIS clicked button' by doing:

$(".Delete").click(function() {
$(this).html("DELETED!").delay(900).slideUp(600).hide();
});

I've added a bit of animation. Or combine both! CIAO :)