Как получить первый дочерний элемент, в котором сработало событие?

231
17 июля 2018, 16:20

как при наведении мышки на TD, получить <div id="."> ( первый дочерний элемент родителя <div id="body_infoReg"> в котором сработало событие ). надеюсь правильно объяснил =) спасибо

// При нажатии на td (кроме перв 
$('#body_infoReg').on('mouseover', 'table tr:not(:first-child) td:first-child', function() { 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="body_infoReg"> 
 
  <div id="1"> 
    <table> 
      <tr> 
        <td></td> 
        <td></td> 
      </tr> 
      <tr> 
        <td></td> 
        <td></td> 
      </tr> 
    </table> 
  </div> 
   
  <div id="2"> 
    <table> 
      <tr> 
        <td></td> 
        <td></td> 
      </tr> 
      <tr> 
        <td></td> 
        <td></td> 
      </tr> 
    </table> 
  </div> 
   
</div>

Answer 1

Можете использовать метод .parentsUntil()

$('td').on('mouseover', function() { 
  console.log($(this).parentsUntil('#body_infoReg').last().attr('id')); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="body_infoReg"> 
 
  <div id="1"> 
    <table> 
      <tr> 
        <td>1.1</td> 
        <td>1.2</td> 
      </tr> 
      <tr> 
        <td>1.3</td> 
        <td>1.4</td> 
      </tr> 
    </table> 
  </div> 
 
  <div id="2"> 
    <table> 
      <tr> 
        <td>2.1</td> 
        <td>2.2</td> 
      </tr> 
      <tr> 
        <td>2.3</td> 
        <td>2.4</td> 
      </tr> 
    </table> 
  </div> 
 
</div>

Answer 2

Несколько пояснений к вашей и исправленной разметке. Если вы хотите поместить данные в dom объект, не нужно выдумывать для этого новый ТЕГ (id="1"), правильней поместить данные в data- с желаемым названием, вот так - data-id="2".

Если вы хотите обратиться к конкретному родителю, задайте ему класс (к примеру <div class="table-block" data-id="1">)

$(document).on('mouseover', '#body_infoReg td', function() { 
  console.log($(this).parents('.table-block').data('id')); 
});
td { 
  padding: 1rem; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="body_infoReg"> 
  <div class="table-block" data-id="1"> 
    <table> 
      <tr> 
        <td>1</td> 
        <td>2</td> 
      </tr> 
      <tr> 
        <td>3</td> 
        <td>4</td> 
      </tr> 
    </table> 
  </div> 
 
  <div class="table-block" data-id="2"> 
    <table> 
      <tr> 
        <td>5</td> 
        <td>6</td> 
      </tr> 
      <tr> 
        <td>7</td> 
        <td>8</td> 
      </tr> 
    </table> 
  </div> 
 
</div>

Answer 3
$('#body_infoReg').on('mouseover', 'table tr:not(:first-child) td:first-child', function() {
   var divParent = $(this).closest('div[id]');
});
READ ALSO
Менять Яндекс карты по клику
javascript

Менять Яндекс карты по клику

Столкнулся с такой проблемой

 249
Вывод на печать
javascript

Вывод на печать

На сервере находится шаблон в формате doc, в шаблоне имеется n строк

 371
Как в функцию передать json?
javascript

Как в функцию передать json?

не могу понять, почему внутри функции json = undefinedПочему так происходит? Первый console

 215
Поиск по организациям Yandex map API
javascript

Поиск по организациям Yandex map API

Есть код который добавляет на карту точки по запросу из JSONПолучаю эти точки и кластеризую их

 239