Next Adjacent Selector (“prev + next”)

Categories: Selectors > Hierarchy

next adjacent selector

version added: 1.0jQuery('prev + next')

prev

Any valid selector.

next

A selector to match the element that is next to the first selector.

Description: Selects all next elements matching "next" that are immediately preceded by a sibling "prev".

One important point to consider with both the next adjacent sibling selector (prev + next) and the general sibling selector (prev ~ siblings) is that the elements on either side of the combinator must share the same parent.

Example:

Finds all inputs that are next to a label.

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <form>

    <label>Name:</label>
    <input name="name" />
    <fieldset>
      <label>Newsletter:</label>

      <input name="newsletter" />
    </fieldset>
  </form>
  <input name="none" />
<script>$("label + input").css("color", "blue").val("Labeled!")</script>

</body>
</html>

Demo:

Support and Contributions

Need help with Next Adjacent Selector (“prev + next”) or have a question about it? Visit the jQuery Forum or the #jquery channel on irc.freenode.net.

Think you've discovered a jQuery bug related to Next Adjacent Selector (“prev + next”)? Report it to the jQuery core team.

Found a problem with this documentation? Report it on the GitHub issue tracker

http://direkteaktion.over-blog.de/article-e-lawine-gegen-die-akw-laufzeitverlangerung-58663527.html René Leonhardt

How can I find the next input if it has another parent?
I have a label and from that context I want to find the input field.
Is there a selector for this?
<td>Label</td><td></td>

TokTok

$('td:has(label) + td > input')

http://twitter.com/reneleonhardt René Leonhardt

Thank you, that worked like a charm!

Is this also possible with a context object when I have the label already as jQuery object, say $label = $(“label[for=t1]“)
I would like to know if there is a selector string like $(“:parent + td > input”, $label) to find the input object instead of using the object API $label.parent().next().find(“input”).

TokTok

not like that because “:parent” does not select parent element but it just checks whether your element has any children. it should actually be called “:isParent” or “:hasChildren”

but you can probably do it with parent():
$label.parent().find('+ td > input')

TokTok

or clearer:
$label.parent('td').find('+ td > input')

or a few bits shorter:
$('+ td > input', $label.parent('td'))

http://joshuaj.myopenid.com/ Josh

How can I reverse this and select previous elements? If “label + input” matches all inputs that follow labels, then how can I match all labels that are followed by inputs?

http://www.learningjquery.com/ Karl Swedberg

$('input').prev('label')

http://www.learningjquery.com/ Karl Swedberg

$('input').prev('label')

jQuery API

Next Adjacent Selector (“prev + next”)