JQuery: получить текстовое содержимое из соседнего элемента и распечатать в модальное название

Question

Используя jQuery, как я могу получить текстовое содержимое элемента в том же элементе div, что и щелкающий тег, затем сохранить это текстовое содержимое как переменную и немедленно напечатать его в заголовке модального окна?

На данный момент следующий код просто выбирает все шесть названий каждой карты и печатает их все в модальный заголовок. Я экспериментировал с различными функциями, такими как .closest (), .next () и $ (this), но не могу заставить его работать! Я где-то читал о функции массива, используя .eq (), но я не был уверен, как изменить номер массива в зависимости от того, какой из шести тегов был нажат.

Я не могу создать весь HTML и jQuery здесь, но могу разместить соответствующие фрагменты кода ниже:

<div class="modal-header">
   <h5 id="InsertTitle" class="modal-title"></h5>
</div

...

<div class="card">
   <div class="card-header">
      <i onClick="add()" class="i-hover"></i>
      <h4 class="mb-0">Title</h4>
   </div>
   <div class="card-body">
      ...
   </div>
</div>

...

function add() {
        var title = $('i.i-hover').next("h4").text();
        console.log(title);
        $("#InsertTitle.h5").text(title);
    }

Answer 1

Вы можете использовать это так

function add(el) {
    var title = $(el).next("h4").text();
    console.log(title);
    $("#InsertTitle.h5").text(title);
 }

и в html

<i onClick="add(this)" class="i-hover"></i>

Примечание: при использовании $(this) непосредственно в функции может не ссылаться на нужный элемент .. поэтому вы можете передать аргумент для (this)