Jquery selector problem

Question

I have two in a table with ids row_26 and notificationrow_26.

I want to highlight row_26. So I use either

var deviceUID = 26;
$("#row_" + deviceUID).effect("highlight", {}, 3000);       

OR

$("tr[id^='row_"+deviceUID+"']").effect("highlight", {}, 3000);

but when I do this. It also highlights the notificationrow_26 . Also the highlight does not work properly on notificationrow_26. It does not change its color back to original.

Am I missing something?

Answer 1

Both of those selectors work for me to select the single element row_26, is that not what you're trying to do? If it is, there may be a problem elsewhere in your code that you haven't included.

[id^=row_26] would also match ids like row_260, however, which is probably not what you want.

If you wanted to match (anything)row_26 to catch both the row and the notificationrow you need an end-of-attribute selector instead of start-of-attribute: [id$=row_26].

[Aside: however if performance is an issue, it is faster to just use two separate selectors, #row_26 and #notificationrow_26, which allows jQuery to use getElementById instead of having to search each element's id. Or you can even call it yourself:

$(document.getElementById('row_'+deviceUID)).effect(...);
$(document.getElementById('notificationrow_'+deviceUID)).effect(...);

This looks less ‘jQuery-like’, but it's faster and you don't have to worry about ‘special’ characters in the attribute value that don't fit in a selector.]