jQuery — Selecting Parents and Elements of One Type

Photo by Fred Moon on Unsplash

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.

:only-of-type Selector

We can use the :only-of-type selector to select all elements that have no siblings with the same element name.

For example, if we have:

<div>
  <button>Sibling</button>
  <button>Sibling</button>
</div>
<div>
  <button>Sibling</button>
</div>
<div>
  None
</div>
<div>
  <button>Sibling</button>
  <button>Sibling</button>
  <button>Sibling</button>
</div>
<div>
  <button>Sibling</button>
</div>

Then we can get buttons that are the only child in the div by writing:

$("button:only-of-type").text("Alone").css("border", "2px blue solid");

Then we change their text and add a border to them.

.outerHeight()

The .outerHeight() method lets us get the computed outer height, which includes the padding, border, and optionally margin, for the first element in the set of matched elements.