jQuery — Neighboring Selectors

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">

Then we can get the input next to the label and add some styles and set their value by writing:

$("label + input").css("color", "blue").val("Labeled!");

Next Siblings Selector (“prev ~ siblings”)

The next sibling selector lets us select all sibling elements that follow the prev element.

The siblings must have the same parent.

For example, if we have:

<div>div (doesn't match since before #prev)</div>
<span id="prev">span#prev</span>
<div>div sibling</div>
<div>div sibling <div id="small">div niece</div>
</div>
<span>span sibling (not div)</span>
<div>div sibling</div>

Then we can get all the divs that comes with the span with ID prev by writing:

$("#prev ~ div").css("border", "3px groove blue");

We call css to add a blue border to the matching elements.

.nextAll()

The .nextAll() method gets all the following siblings of each element in the set of matched elements.

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 all the li s that comes after the li with the class third-item and add a red background to them by writing:

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

.nextUntil()

The .nextUntil() method gets all the following siblings of each element up to but not including the element matched by a selector, DOM node, or jQuery object passed in.

For example, if we have:

<dl>
  <dt id="term-1">term 1</dt>
  <dd>definition 1-a</dd>
  <dd>definition 1-b</dd>
  <dd>definition 1-c</dd>
  <dd>definition 1-d</dd>
  <dt id="term-2">term 2</dt>
  <dd>definition 2-a</dd>
  <dd>definition 2-b</dd>
  <dd>definition 2-c</dd>
  <dt id="term-3">term 3</dt>
  <dd>definition 3-a</dd>
  <dd>definition 3-b</dd>
</dl>

Then we get the dt element with ID term-2 up to the dt with ID term-3 by writing:

$("#term-2")
  .nextUntil("dt")
  .css("background-color", "red");

Then we add a red background to it.

.not()

We call not to remove elements from a set of matched elements.

For example, if we have:

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

Then we get all the li s in odd-numbered positions by writing:

$("li").not(":nth-child(2n)").css("background-color", "red");

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

Conclusion

We can get elements at various positions with jQuery.