Как найти родителя с известным классом в обычном JavaScript - PullRequest
Новая
       1

Как найти родителя с известным классом в обычном JavaScript

0 голосов
/ 12 апреля 2020

Пожалуйста, сначала посмотрите на этот html код: 

<div class="parent">
  <div class="child">
    
  </div>
  <div class="child">
    <!-- Some code here -->
  </div>
</div>
<div class="parent>
  <!-- some code here -->
</div>

Предположим, я нахожусь в "дочернем" классе, и мне нужно получить ближайший родительский класс "дочернего". Помните, что существует более одного «родительского» класса, мне просто нужен ближайший «родительский» только с использованием простого JavaScript, без использования JQuery.

Как это сделать?

Ответы [ 5 ]

1 голос
/ 12 апреля 2020

Вы можете создать вспомогательную функцию и повторно использовать ее. Надеюсь, это то, что вы ищете - 

let getParentClass = node => {
  return node.parentNode.classList.value;
}

let child = document.querySelectorAll('.child')[0]; // find the node
console.log(getParentClass(child));
<div class="parent">
  <div class="child">

  </div>
  <div class="child">
    <!-- Some code here -->
  </div>
</div>
<div class="parent">
  <!-- some code here -->
</div>
1 голос
/ 12 апреля 2020

Вы можете попробовать использовать closest()

document.querySelectorAll('.child').forEach(function(child){
  console.log(child.closest('.parent'));
});
<div class="parent">
  <div class="child">
    
  </div>
  <div class="child">
    <!-- Some code here -->
  </div>
</div>
<div class="parent">
  <!-- some code here -->
</div>
0 голосов
/ 12 апреля 2020

Используйте это. 

var parent = document.querySelectorAll(".child");
for(var p = 0; p < parent.length; p++) {
    parent[p].parentElement.classList.add("newClass");
    //parent[p].//do something
}

или напрямую указывайте родителя 

var parent = document.querySelectorAll(".child");
for(var p = 0; p < parent.length; p++) {
    parent[p].closest(".parent").classList.add("newClass");
    //parent[p].closest(".parent").//do something
}
0 голосов
/ 12 апреля 2020 
<!DOCTYPE html>
<div class="parent">
  <div class="child">

  </div>
  <div class="child">
    <!-- Some code here -->
  </div>
</div>
<div class="parent">
  <!-- some code here -->
</div>
<script>
const child = document.getElementsByClassName('child')[0];
console.log(child)
const parent = child.closest('.parent');
console.log(parent)
</script>
0 голосов
/ 12 апреля 2020

Вы можете использовать parentNode, чтобы получить ближайшего родителя. Или вы можете использовать closest из ванили js. 

const child = document.querySelector('.child');
const closestParent = child.parentNode;


const child = document.querySelector('.child');
const closestParent = child.parentNode;
console.log(closestParent);

// Or you can use closest
const closest = child.closest('.parent');

console.log(closest);
<div class="parent">
  <div class="child">
    
  </div>
  <div class="child">
    <!-- Some code here -->
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...