Jquery Hide multiple rows have the same id

i have multiple rows with the same id and when used the jquery func开发者_StackOverflow社区tion :

hide();

it hide the first row only and ignore the rest rows.

Could you please tell how can i fix it ?

Thanks in Advance

Neveen

You can't have multiple rows with the same ID, it's invalid markup. From the spec (link):

The id attribute specifies its element's unique identifier (ID). The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character.

Instead, ensure that the IDs are unique or don't use IDs at all, use some other information they all share — a common class, or a common location (e.g., all children of the same table or tbody), etc. If they don't have a common aspect you can use, you'll need to give them one, but it cannot be a duplicated ID.

For instance, to hide all tr elements with the class "foo" you'd use:

$('tr.foo').hide();

More about the jQuery class selector (which is just the CSS class selector) here.

T.J Crowder above is correct.

Another thing you may find useful in jQuery is the each() function.

$('tr.foo').each(
    function(object){
        // do more stuff
        object.hide();
    }
);

With that, you can apply conditional logic as well, maybe only hide the row if it's content contains a filter-word or something.

I didn't actually know that I didn't have to use the 'each'. (thanks TJ)