-
next( String expr ) returns jQuery
Get a set of elements containing the unique next siblings of each of the given set of elements.
next only returns the very next sibling for each element, not all next siblings (see nextAll).
You may provide an optional expression to filter the returned set.Example:
Find the very next sibling of each disabled button and change its text "this button is disabled".
$("button[disabled]").next().text("this button is disabled");HTML:
<div><button disabled="disabled">First</button> - <span></span></div> <div><button>Second</button> - <span></span></div> <div><button disabled="disabled">Third</button> - <span></span></div>Example:
Find the very next sibling of each paragraph that has a class "selected".
$("p").next(".selected").css("background", "yellow");HTML:
<p>Hello</p> <p class="selected">Hello Again</p> <div><span>And Again</span></div> -
next( Selector prev, Selector next ) returns Array<Element>
Matches all next elements specified by "next" that are next to elements specified by "prev".
Example:
Finds all inputs that are next to a label.
$("label + input").css("color", "blue").val("Labeled!")HTML:
<form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" /> -
nextAll( String expr ) returns jQuery
Find all sibling elements after the current element.
Use an optional expression to filter the matched set.Example:
Locate all the divs after the first and give them a class.
$("div:first").nextAll().addClass("after");HTML:
<div></div> <div></div> <div></div> <div></div>Example:
Locate all the paragraphs after the second child in the body and give them a class.
$(":nth-child(1)").nextAll("p").addClass("after");HTML:
<p>p</p> <div>div</div> <p>p</p> <p>p</p> <div>div</div> <p>p</p> <div>div</div> -
not( Selector selector ) returns Array<Element>
Filters out all elements matching the given selector.
Example:
Finds all inputs that are not checked and hilites the next sibling span. Notice there is no change when clicking the checkboxes since no click events have been linked.
$("input:not(:checked) + span").css("background-color", "yellow"); $("input").attr("disabled", "disabled");HTML:
<div> <input type="checkbox" name="a" /> <span>Mary</span> </div> <div> <input type="checkbox" name="b" /> <span>Paul</span> </div> <div> <input type="checkbox" name="c" checked="checked" /> <span>Peter</span> </div> -
not( String, DOMElement, Array<DOMElement> expr ) returns jQuery
Removes elements matching the specified expression from the set of matched elements.
Example:
Adds a border to divs that are not green or blue.
$("div").not(".green, #blueone") .css("border-color", "red");HTML:
<div></div> <div id="blueone"></div> <div></div> <div class="green"></div> <div class="green"></div> <div class="gray"></div> <div></div>Example:
Removes the element with the ID "selected" from the set of all paragraphs.
$("p").not( $("#selected")[0] )Example:
Removes the element with the ID "selected" from the set of all paragraphs.
$("p").not("#selected")Example:
Removes all elements that match "div p.selected" from the total set of all paragraphs.
$("p").not($("div p.selected")) -
nthChild( Number/String index ) returns Array<Element>
Matches the nth-child of its parent or all its even or odd children.
While <a href='Selectors/eq'>:eq(index)</a> matches only a single element, this matches more then one: One for each parent with index. Multiple for each parent with even, odd, or equation.
The specified index is one-indexed, in contrast to :eq() which starts at zero.Example:
Finds the second li in each matched ul and notes it.
$("ul li:nth-child(2)").append("<span> - 2nd!</span>");HTML:
<div><ul> <li>John</li> <li>Karl</li> <li>Brandon</li> </ul></div> <div><ul> <li>Sam</li> </ul></div> <div><ul> <li>Glen</li> <li>Tane</li> <li>Ralph</li> <li>David</li> </ul></div>Example:
This is a playground to see how the selector works with different strings. Notice that this is different from the :even and :odd which have no regard for parent and just filter the list of elements to every other one. The :nth-child, however, counts the index of the child to its particular parent. In any case, it's easier to see than explain so...
$("button").click(function () { var str = $(this).text(); $("tr").css("background", "white"); $("tr" + str).css("background", "#e2e1fb"); $("#inner").text(str); });HTML:
<div> <button>:nth-child(even)</button> <button>:nth-child(odd)</button> <button>:nth-child(3n)</button> <button>:nth-child(2)</button> </div> <div> <button>:nth-child(3n+1)</button> <button>:nth-child(3n+2)</button> <button>:even</button> <button>:odd</button> </div> <div><table> <tr><td>John</td></tr> <tr><td>Karl</td></tr> <tr><td>Brandon</td></tr> <tr><td>Benjamin</td></tr> </table></div> <div><table> <tr><td>Sam</td></tr> </table></div> <div><table> <tr><td>Glen</td></tr> <tr><td>Tane</td></tr> <tr><td>Ralph</td></tr> <tr><td>David</td></tr> <tr><td>Mike</td></tr> <tr><td>Dan</td></tr> </table></div> <span> tr<span id="inner"></span> </span>