jQuery — Parent Elements

jQuery is a popular JavaScript for creating dynamic web pages.

In this article, we’ll look at how to using jQuery in our web apps.

.parents()

The .parents() method lets us get the ancestors of each element in the current set of matched elements.

We can optionally filter that with a selector.

For example, if we have:

<ul class="level-1">  
  <li class="item-i">I</li>  
  <li class="item-ii">II  
    <ul class="level-2">  
      <li class="item-a">A</li>  
      <li class="item-b">B  
        <ul class="level-3">  
          <li class="item-1">1</li>  
          <li class="item-2">2</li>  
          <li class="item-3">3</li>  
        </ul>  
      </li>  
      <li class="item-c">C</li>  
    </ul>  
  </li>  
  <li class="item-iii">III</li>  
</ul>

Then we get all the ancestors of the li with the item-a class by writing:

$("li.item-a").parents().css("background-color", "red");

Then we add a red background to it.

.parentsUntil()

The .parentsUntil() method gets the ancestors of each element in the current set of matched elements up to but nor including the element matched bu the selector, DOM node, or jQuery object.

For example, if we have:

<ul class="level-1 yes">  
  <li class="item-i">I</li>  
  <li class="item-ii">II  
    <ul class="level-2 yes">  
      <li class="item-a">A</li>  
      <li class="item-b">B  
        <ul class="level-3">  
          <li class="item-1">1</li>  
          <li class="item-2">2</li>  
          <li class="item-3">3</li>  
        </ul>  
      </li>  
      <li class="item-c">C</li>  
    </ul>  
  </li>  
  <li class="item-iii">III</li>  
</ul>

Then we can get the parents of the li with the item-a class up to but not including the li with class level-1 and add a background to them by writing:

$("li.item-a")  
  .parentsUntil(".level-1")  
  .css("background-color", "red");

:password Selector

The :password selector lets us select all elements with type password.

For example, if we have:

<form>  
  <input type="button" value="Input Button">  
  <input type="checkbox">  
  <input type="file">  
  <input type="hidden">  
  <input type="password">  
  <select>  
    <option>Option</option>  
  </select>  
  <textarea></textarea>  
  <button>Button</button>  
</form>

Then we write:

$("input:password").css({  
  background: "yellow",  
  border: "3px red solid"  
});

to add a yellow background and a red border to the input with type password.

.position()

The .position() method gets the current coordinates of the first element in the set of matched elements relative to the offset parent.

For example, if we have:

<p>Hello</p>

Then we can get the position of the p element by writing:

const p = $("p").first();  
const position = p.position();  
console.log(position)

And we get:

{top: 0, left: 8}

as the value of the position .

.prepend()

The .prepend() method inserts the content to the beginning of each element in the set of matched elements.

For example, if we have:

<div class="container">  
  <div class="inner">Hello</div>  
  <div class="inner">Goodbye</div>  
</div>

Then we add an element before the text node of each div with the class inner by writing:

$(".inner").prepend("<p>Test</p>");

.prependTo()

The .prependTo() method lets us prepend an element in a set of matched elements.

For example, if we have:

<div class="container">  
  <div class="inner">Hello</div>  
  <div class="inner">Goodbye</div>  
</div>

Then we can prepend a p element to each div with the class inner as their child by writing:

$("<p>Test</p>").prependTo(".inner");

Conclusion

We can get parent elements and do many thing with them with jQuery.