1 line
2.6 KiB
JSON
1 line
2.6 KiB
JSON
{"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<ul>\n <li>list item 1</li>\n <li>list item 2</li>\n <li class=\"third-item\">list item 3</li>\n <li>list item 4</li>\n <li>list item 5</li>\n</ul>\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 "}]} |