{"name":"next","type":"method","title":".next()","deprecated":null,"removed":null,"desc":"Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.","categories":["traversing/tree-traversal","version/1.0"],"entries":[{"return":"jQuery","signatures":{"added":"1.0","argument":{"desc":"A string containing a selector expression to match elements against.","name":"selector","optional":"true","type":"Selector"}},"examples":[{"desc":"Find the very next sibling of each disabled button and change its text \"this button is disabled\".","code":"\n$( \"button[disabled]\" ).next().text( \"this button is disabled\" );\n","css":"\n  span {\n    color: blue;\n    font-weight: bold;\n  }\n  button {\n    width: 100px;\n  }\n","html":"\n<div><button disabled=\"disabled\">First</button> - <span></span></div>\n<div><button>Second</button> - <span></span></div>\n<div><button disabled=\"disabled\">Third</button> - <span></span></div>\n"},{"desc":"Find the very next sibling of each paragraph. Keep only the ones with a class \"selected\".","code":"\n$( \"p\" ).next( \".selected\" ).css( \"background\", \"yellow\" );\n","html":"\n<p>Hello</p>\n<p class=\"selected\">Hello Again</p>\n<div><span>And Again</span></div>\n"}],"longdesc":"\n    <p>Given a jQuery object that represents a set of DOM elements, the <code>.next()</code> method allows us to search through the immediately following sibling of these elements in the DOM tree and construct a new jQuery object from the matching elements.</p>\n    <p>The method optionally accepts a selector expression of the same type that we can pass to the <code>$()</code> function. If the immediately following sibling matches the selector, it remains in the newly constructed jQuery object; otherwise, it is excluded.</p>\n    <p>Consider a page with a simple list on it:</p>\n    <pre><code>\n&lt;ul&gt;\n  &lt;li&gt;list item 1&lt;/li&gt;\n  &lt;li&gt;list item 2&lt;/li&gt;\n  &lt;li class=\"third-item\"&gt;list item 3&lt;/li&gt;\n  &lt;li&gt;list item 4&lt;/li&gt;\n  &lt;li&gt;list item 5&lt;/li&gt;\n&lt;/ul&gt;\n    </code></pre>\n    <p>If we begin at the third item, we can find the element which comes just after it:</p>\n    <pre><code>\n$( \"li.third-item\" ).next().css( \"background-color\", \"red\" );\n    </code></pre>\n    <p>The result of this call is a red background behind item 4. Since we do not supply a selector expression, this following element is unequivocally included as part of the object. If we had supplied one, the element would be tested for a match before it was included.</p>\n  "}]}