jQueryでparent（）とclosest（）はどのように機能しますか？

Question

rowテーブルを後で別のrowの後に追加するだけでよいので、次のコードを使用しました（実際にはこのコードをVisualforceページで使用しています）。

function queryAndUpdateLead() { 
     var a = $('[id$=ibrahim]').closest('tr') 
       .after('<tr><td>New Content 1</td><td>\ 
         <a href="#">New Content 2</a></td></tr>'); 
} 

ここでの問題は、この行は、テーブル内のすべての既存の行の後に追加されていることであると私はa内の要素の数を確認するためにlengthプロパティを使用したとき、私は（私が最初に2行を持っている）は常に2を取得します私が欲しいもの

alert('a.length') // this shows 2 

は、既存のすべての行のみ直接の親行を取得しないことですが、それが動作しない理由を私は知らないのですか？

EDIT：SalesforceのサーバによってレンダリングされたHTML CODE：

<tbody id="j_id0:j_id3:j_id4:j_id6:tb"> 
<tr class="dataRow even first" onfocus="if (window.hiOn){hiOn(this);}" onblur="if (window.hiOff){hiOff(this);}" onmouseout="if (window.hiOff){hiOff(this);} " onmouseover="if (window.hiOn){hiOn(this);} "> 
**<td id="j_id0:j_id3:j_id4:j_id6:0:ibrahim" class="dataCell " onclick="queryAndUpdateLead();" colspan="1">** 
<td id="j_id0:j_id3:j_id4:j_id6:0:j_id7" class="dataCell " colspan="1"> 
<td id="j_id0:j_id3:j_id4:j_id6:0:j_id8" class="dataCell " colspan="1"> 
<td id="j_id0:j_id3:j_id4:j_id6:0:j_id9" class="dataCell " colspan="1"> 
<td id="j_id0:j_id3:j_id4:j_id6:0:j_id10" class="dataCell " colspan="1"> 
</tr> 
<tr class="dataRow odd last" onfocus="if (window.hiOn){hiOn(this);}" onblur="if (window.hiOff){hiOff(this);}" onmouseout="if (window.hiOff){hiOff(this);} " onmouseover="if (window.hiOn){hiOn(this);} "> 
<td id="j_id0:j_id3:j_id4:j_id6:1:ibrahim" class="dataCell " onclick="queryAndUpdateLead();" colspan="1"> 
<td id="j_id0:j_id3:j_id4:j_id6:1:j_id7" class="dataCell " colspan="1"> 
<td id="j_id0:j_id3:j_id4:j_id6:1:j_id8" class="dataCell " colspan="1"> 
<td id="j_id0:j_id3:j_id4:j_id6:1:j_id9" class="dataCell " colspan="1"> 
<td id="j_id0:j_id3:j_id4:j_id6:1:j_id10" class="dataCell " colspan="1"> 
</tr> 
</tbody> 
</table> 

Answer 1

あなたが$('[id$=ibrahim]')要素のコレクションを持っているとして、あなたがした後、現在クリックされた要素の最も近いtrを見つけて、そのコンテンツを挿入するために$(this)を使用する必要があります。

function queryAndUpdateLead() { 
     var $(this).closest('tr') 
       .after('<tr><td>New Content 1</td><td>\ 
         <a href="#">New Content 2</a></td></tr>'); 
}