Как parent() и closest() работают в jQuery?
Я хочу просто добавить 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>');
}
Проблема здесь в том, что эта строка добавляется после всех существующих строк в таблице, и когда я использовал length
свойство для проверки количества элементов в a
Я получаю всегда 2 (у меня изначально 2 ряда)
alert('a.length') // this shows 2
Я хочу получить только прямую родительскую строку, а не все существующие строки, но я не знаю, почему она не работает?
РЕДАКТИРОВАТЬ: HTML-КОД, ПРЕДОСТАВЛЯЕМЫЙ СЕРВЕРОМ SALESFORCE:
<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>
1 ответ
Решение
Как у вас есть коллекция $('[id$=ibrahim]')
элементы, вам нужно использовать $(this)
найти ближайший tr
текущего элемента и вставьте его после:
function queryAndUpdateLead() {
var $(this).closest('tr')
.after('<tr><td>New Content 1</td><td>\
<a href="#">New Content 2</a></td></tr>');
}