JQuery: Find (the index of) a row with a specific data attribute value

Question

I am trying to append a string, myoutput, right after a specific row in a table similar to this one:

<table>
<tr data-my_id='1'> <td> content </td> </tr>
<tr data-my_id='2' data-my_other_id='1' > <td> content </td> </tr>
<tr data-my_id='3' data-my_other_id='2' > <td> content </td> </tr>
</table>

So let's say I want to append my output string after the tr with data-my_other_id='2' (note that in my code, my_other_id = 2 already )

I am trying to accomplish it doing this:

var want = $("tr").find("[data-my_other_id='" + my_other_id + "']").index();

after finding the index, I want to append my output strhing to this row...

$(want).insertAfter(...?);

Also... I noticed whenever I do

alert( want = $("tr").find("[data-my_other_id='" + my_other_id + "']").length)

I get 0 ...

Help please and let me know if my question is not clear enough so I can explain better.

Answer 1

I'm assuming you want to update the content rather than append, but it doesn't really change anything. I don't think you want to use find() that way. Try something like:

var $row = $('tr[data-my_other_id="' + id + '"]');
// should be the index of the tr in the <table>
// this may not be a good idea though - what if you add a header row later?
var index = row.index() + 1; // if you want 1-based indices
$row.find("td").text("I am row #" + index);

Answer 2

This is because find will no search siblings, only children. Try attaching your search to table.

html:

<table>
<tr data-my_id='1'> <td> content </td> </tr>
<tr data-my_id='2' data-my_other_id='1' > <td> content </td> </tr>
<tr data-my_id='3' data-my_other_id='2' > <td> content </td> </tr>
</table>​

js:

var my_other_id = 2;
alert( $("table").find("[data-my_other_id='" + my_other_id + "']").length);​

demo: http://jsfiddle.net/gDb3A/