Как получить родитель верхнего уровня div

Elvira спросил: 31 июля 2018 в 09:32 в: javascript

Я хотел бы знать, как получить родителя верхнего уровня div. Я знаю, что вы можете использовать parent(), но у меня есть функция click для нескольких div

<div class="parent" data-row="1">
  <div class="cat div1">
    <div class="sub-cat div1_1">content</div>
    <div class="sub-cat div1_2">content</div>
    <div class="sub-cat div1_3">
      <div class="inner-cat 1_3_3">innercontent</div>
    </div>
  </div>
  <div class="cat div2">
    <div class="sub-cat div2_1">content</div>
  </div>
</div>

Предположим, у меня есть родительский div с именем родительского класса, который также включает номер индекса в data-row.

У меня есть функции щелчка на .sub-cat, .inner-cat и .cat, однако, я хочу получить функцию data-row с каждым щелчком.

Я попытался получить строку данных с помощью $(this).closest('.parent'), чтобы перейти к родительский div, но это не работает, так как в нем возвращается длина 0.

2 ответа

Есть решение
Rory McCrossan ответил: 31 июля 2018 в 09:37

Для этого вы можете использовать closest(). parents() является альтернативой, но closest() работает лучше, так как останавливается при первом совпадении.

$('.cat, .innercat, .sub-cat').click(function(e) {
  e.stopPropagation();
  var row = $(this).closest('.parent').data('row');
  console.log(row);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent" data-row="1">
  <div class="cat div1">
    <div class="sub-cat div1_1">content</div>
    <div class="sub-cat div1_2">content</div>
    <div class="sub-cat div1_3">
      <div class="inner-cat 1_3_3">innercontent</div>
    </div>
  </div>
  <div class="cat div2">
    <div class="sub-cat div2_1">content</div>
  </div>
</div>

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

Jamiec ответил: 31 июля 2018 в 09:44
плюс 1 от меня, потому что да, вы правы closest - лучшее решение.
Elvira ответил: 31 июля 2018 в 09:46
@Rory McCrossan Помогает ли stopPropagation выполнять другие функции?
Rory McCrossan ответил: 31 июля 2018 в 11:04
@ Эльвира, если они привязаны к событиям на родителях элемента, который вызвал исходное событие, то да, так и будет.
Jamiec ответил: 31 июля 2018 в 09:34

Вам нужен parents(".parent"), который будет проходить до родительского дерева

$('.cat, .sub-cat, .inner-cat').on("click", function(){
    var $parent = $(this).parents(".parent");
    console.log($parent.data("row"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent" data-row="1">
  <div class="cat div1">
      <div class="sub-cat div1_1">content</div>
      <div class="sub-cat div1_2">content</div>
      <div class="sub-cat div1_3">
          <div class="inner-cat 1_3_3">innercontent</div>
      </div>
  </div>
  <div class="cat div2">
     <div class="sub-cat div2_1">content</div>
  </div>
</div>