Как получить родительское значение

Question

У меня есть этот базовый код в моем HTML документа:

<div class="database_name" style="background: rgb(243, 243, 243);"> 
    <i class="minus_sign fa fa-minus-circle"></i> 
    <div id="hovering_div_inside"> 
     <i class="fa fa-database database_sign"></i> 
     <span class="dat_name">Example</span> 
    </div> 
    <div class="appended"> 
     <div class="create_new_table"> 
      <i class="fa fa-pencil"> 
       <span class="create_new_table_span">New</span> 
      </i> 
     </div> 
     <span class="table_names_from_database"></span> 
    </div> 
</div> 

Мне нужно, чтобы получить пример слова $(".dat_name).text() когда-либо я нажимаю на $(".create_new_table_span") на New.

Должно быть динамичным не только один раз, но также существует множество NEW ссылок селектор parent() не работает.

Answer 1

Найдите ближайший .database_name, а затем .dat_name под ним по щелчку .create_new_table_span, как показано ниже.

$('.create_new_table_span').click(function(){ 
    var text = $(this).closest('.database_name').find('.dat_name').text(); 
    alert(text); 
}) 

Answer 2

Вы можете сделать что-то вроде этого:

$(".create_new_table_span").click(getDataName); 

function getDataName(e){ 
    var name = $(e.target).closest('.database_name').find('.dat_name').text(); 
    //do what ever you want with the name. 
} 

Использование closest() метода вы получите первый ближайший элемент, соответствующий селектор. И find() ищет дочернее дерево элемента.

Вы также можете использовать поиск() непосредственно на цель клик:

$(e.target).find('.dat_name');