How do I get the parents of a specific element?

jquery find parent with class
jquery parent of parent
jquery get parent id
jquery find previous element with class
jquery check if parent element exists
jquery parent > child selector
jquery closest
javascript get closest element by class

I'm trying to get all the parents (that have the class "parent") of an element (that have the class "active"), and then apply a style to it. But it doesn't seem to find the elements that I request for.

This is the HTML that I'm currently using:

<ul>
  <li class="parent">
    <ul class="children">
      <li class="active">Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </li>
</ul>

And I'm using the following Javascript file to apply a style to all the parents with the class "parent" of the starting element with the class "active":

function openList() {
  el = document.getElementsByClassName("active");
  while (el.parentNode) {
    el = el.parentNode;
    if (el.className === "parent") {
      el.style.display="block";
    }
  }
}

window.onload = openList();

It is not returning anything, neither errors, but seems to be running.

.parents(), Note: There's an update version of this article. One thing I need to do a lot in my plugins is find a parent element with a particular selector. Definition and Usage The parentElement property returns the parent element of the specified element. The difference between parentElement and parentNode, is that parentElement returns null if the parent node is not an element node: document.body.parentNode; // Returns the <html> element

First you are calling the function and assigning what it returns to the

querySelector(), closest(), and classList would be the best way to handle this

document.querySelector("li.active")
  .closest(".parent")
    .classList
      .add("open");
li.parent {
  display: none;
}

li.parent.open {
  display: block;
}
<ul>
  <li class="parent">
    <ul class="children">
      <li class="active">Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </li>
</ul>

How to get the closest parent element with a matching selector using , This parents() method in jQuery traverse all the levels up the selected element and return that all elements. Syntax: $(selector).parents(). Here� The parents() is an inbuilt method in jQuery which is used to find all the parent elements related to the selected element. This parents() method in jQuery traverse all the levels up the selected element and return that all elements. Syntax: $(selector).parents() Here selector is the selected element whose all parent need to find. Parameters: It does not accept any parameter. Return value: It returns all the parents of the selected element.

function openList() {
  
  let el = document.getElementsByClassName("parent");
  Array.prototype.forEach.call(el,(parentNode)=>{
    if(parentNode.getElementsByClassName('active').length>0){
         parentNode.style.display="block";
    }
  });
}

window.onload = openList;
<ul>
  <li class="parent">
    <ul class="children">
      <li class="active">Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </li>
</ul>

jQuery, The parents() method returns all ancestor elements of the selected element. An ancestor is a parent, grandparent, great-grandparent, and so on. The DOM tree:� The parent () method returns the direct parent element of the selected element. The DOM tree: This method only traverse a single level up the DOM tree. To traverse all the way up to the document's root element (to return grandparents or other ancestors), use the parents () or the parentsUntil () method. Tip: To traverse a single level down the DOM tree, or all the way down to the last descendant (to return children or other descendants), use the children () or find () method.

jQuery parents() Method, The element>element selector is used to select elements with a specific parent. Note: Elements that are not directly a child of the specified parent, are not� Given an HTML document and the task is to select a particular element and get all the child element of the parent element with the help of JavaScript. Approach 1: Select an element whose child element is going to be selected. Use.children property to get access of all the children of element.

CSS element>element Selector, Get the parent DOM elements of a set of DOM elements. Please note that . parents() travels multiple levels up the DOM tree as opposed to the� Get all matching parents (not just the first). Get all parent elements and push them to an array. Get all parent elements until you find one that matches a selector.

parents, parent you are testing for. if ( $(".child-element").parents("#main-nav").length == 1 ) { // YES, the child element is inside the parent } else { // NO, it is not inside }. element.findElement(By.tagName("h3")).getText(); here element is iterated element So lets see one code that would print all the text but here it will go first to parent and then it would go to child element.

Comments
  • el.className === "parent" is a check that will fail if that element has more than one class. el.classList is very helpful for this ...
  • window.onload = openList(); <-- wrong
  • developer.mozilla.org/en-US/docs/Web/API/Element/closest
  • You might want el.parentElement.parentElement seen as it 2 nodes up the tree. Or you could do el.parentElement.closest("li") if the parent is higher up the dom.
  • depending on how large your html is it might be a better approach to get all elements with class 'parent' and see if they have a childElement with class 'active'
  • I don't see how can that be a better approach than this @jonathanHeindl Also @MaheerAli should use classlist like element.classList.contains(class);