Найти связанный элемент с помощью JQuery

Question

На основе этого DOM дерева ниже, когда кнопка комментария ответа щелкнула мне нужно использовать $(this), а затем перейти к следующему комментарию текстового .task-modal-cmt-reply-textarea

Я использую JQuery и попытался использовать .parent().parent().closest('.task-modal-cmt-reply-textarea') и немного другой комбинации без удачи.

Может ли кто-нибудь показать мне эффективный способ получить этот элемент в var?

---

То, что я пытаюсь сделать ...

У меня есть щелчок даже на кнопку комментария ответ, который вставить форму ответа в DOM ниже родительского комментариев, когда нажмите кнопку ответа, используя ...

$document.on('click', '.cmt-reply-btn', function(e) {} 

В этом событии нажмите, чтобы форма ответа была помещена в DOM wi го ...

$parentCmtDomNode.after(cmtReplyFormTemplateHtml); 

После того, как форма в DOM Я пытаюсь прикрепить плагин JQuery к нему для возможности @mention стиле с использованием ...

$('.task-modal-cmt-reply-textarea').mentionsInput({}); 

Проблема

Библиотека @mention работает для первого нажатия на форму комментария, но все остальные формы ответа не работают

Answer 1

еще один способ, чтобы получить ссылку на этот элемент, должен был бы сделать это:

var el = $(this).parent().parent().next().find('.task-modal-cmt-reply-textarea').eq(0);

отмечают, что эк (0) просто возвращает один объект вместо массива с одним элементом, что может потребоваться или не понадобиться в зависимости от того, что вы хотите с ним делать.

Answer 2

попробуйте это

var textarea_value=$(this).closest('.Activity-item').next('.Activity-item').find('form .task-model-cmt-reply-textarea').val(); 

или если его связанные с data-activityid = "12", так что вы можете использовать

$(document).on('click','.cmt-reply-btn',function(){ 
    var textarea_value = $(form[data-comment-parent-id = "'+$(this).attr('data-activityid')+' .task-modal-cmt-reply-textarea"]).val(); 
}); 

Answer 3

Вам нужно сделать еще .parent(), два родителя() ты только довести вас до уровня класса " Activity-item Activity-comment "с идентификатором активности-id = 12. Сделайте еще один родитель, и вы должны быть в порядке.

Answer 4

Более эффективным способом было бы использовать parents апи из JQuery затем следуют ваши .closests

.parents('div') 

В .parents() и .parent() методы аналогичны, за исключением того, что последний только перемещается на один уровень вверх по дереву DOM. Кроме того, метод $ ("html") .parent() возвращает набор, содержащий документ, тогда как $ ("html") .parents() возвращает пустой набор.

Затем добавьте следующий вспомогательный селектор в свою ближайшую цепь.

.closest('textarea[name=^"task-modal-cmt-textarea"]') 

Это выглядит для ближайшего текстового поля с именем, начинающимся с целевым покадрово-CMT-текстовым полем. Это более эффективно, чем то, что у вас есть, поскольку это устраняет любые запросы к элементам non textarea, а затем отфильтровывает только текстовые области, которые имеют это конкретное имя.

EDIT: Обновлено Ответ на недавнее изменение OP.

$('.task-modal-cmt-reply-textarea').mentionsInput({}); 

Это будет выбирать все «.task покадрово-СМТ-ответ-текстовое поле», которые находятся на экране в то время, он не учитывает будущие. Чтобы достичь того, что вы ищете, вы должны поместить субселектор в эту цепочку, чтобы он мог прикрепляться к самой новой форме, которая была создана.

$('.task-modal-cmt-reply-textarea',$($parentCmtDomNode).next('textarea')).mentionsInput({}); 

Это должен быть помещен после

$parentCmtDomNode.after(cmtReplyFormTemplateHtml); 

Answer 5

Попробуйте это:

var txt_html = $(this).parents('.Activity').children("textarea:first").html(); 

var txt_val = $(this).parents('.Activity').children("textarea:first").val(); 

В родителях() функция, которую вы должны использовать ближайший родительский класс/идентификатор.

Answer 6

var el = $(this).parents('.Activity-item').next().find('.task-modal-cmt-reply-textarea').eq(0);