jQuery — Neighboring Selectors

Photo by Alex Blăjan 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.

.next()

The .next() method get the element sibling element that immediately follows a given element.

For example, if we have:

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li class="third-item">list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

Then we get the li that’s immediately next to the li with class third-item by writing:

$("li.third-item").next().css("background-color", "red");

Then we call css to add a red background color to it.

Next Adjacent Selector (“prev + next”)

We can use the next adjacent selector to add the adjacent selector to get the sibling element next to the given element.

For example, if we have:

<form>
  <label for="name">Name:</label>
  <input name="name" id="name">
  <fieldset>
    <label for="newsletter">Newsletter:</label>
    <input name="newsletter" id="newsletter">
  </fieldset>
</form>
<input name="none">