Использование переменной из .closest() в селектор

Question

Я уверен, что это очень легко сделать, но я застрял.

У меня есть несколько форм на странице, каждый с кнопкой «duplicate».

Кнопка дублирует строку и помещает ее в конец таблицы, которая находится внутри каждой формы. Класс таблиц «.table-add». Поэтому я пытаюсь сказать кнопке, чтобы найти ближайший элемент формы и добавить его в путь на моем селекторе, но он не работает. Я знаю, что он может работать, если я поместил идентификатор в каждой форме и призову к ним, но это не то, что я хочу. Спасибо за помощь.

Это мой код:

i=0; 
$(".duplicate").on("click", function(e) { 
    i++; 
    $newID = 'clon'+i; 
    selectedObj = $($(e.target).closest("form")); 
    alert(selectedObj.html()); //**THIS WORKS** 
    $cloned = '<tr class="'+$newID+'">'+$(selectedObj+' .table-add tr:first').next().html()+'</tr>'; 
    $(selectedObj+' .table-add > tbody:last').append($cloned); 
}); 

Answer 1

Просто используйте:

var i=0; 
$(".duplicate").on("click", function(e) { 
    i++; 
    var $newID = 'clon'+i; 
    var selectedObj = $(e.target).closest("form"); 
    alert(selectedObj.html()); //**THIS WORKS** 
    var $cloned = '<tr class="'+$newID+'">'+selectedObj.find('.table-add tr:first').next().html()+'</tr>'; 
    selectedObj.find('.table-add > tbody:last').append($cloned); 
}); 

selectedObj является объектом JQuery, так что вы можете использовать функцию .find() для выбора .table-add tr:first и '.table-add > tbody:last'.