control-freak-ide/Control-Freak-Documentation/jQuery/docs/entries/siblings.json

{"name":"siblings","type":"method","title":".siblings()","deprecated":null,"removed":null,"desc":"Get the siblings of each element in the set of matched elements, optionally filtered by a 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 unique siblings of all yellow li elements in the 3 lists (including other yellow li elements if appropriate).","code":"\nvar len = $( \".hilite\" ).siblings()\n  .css( \"color\", \"red\" )\n  .length;\n$( \"b\" ).text( len );\n","css":"\n  ul {\n    float: left;\n    margin: 5px;\n    font-size: 16px;\n    font-weight: bold;\n  }\n  p {\n    color: blue;\n    margin: 10px 20px;\n    font-size: 16px;\n    padding: 5px;\n    font-weight: bolder;\n  }\n  .hilite {\n    background: yellow;\n  }\n","html":"\n<ul>\n  <li>One</li>\n  <li>Two</li>\n  <li class=\"hilite\">Three</li>\n  <li>Four</li>\n</ul>\n\n<ul>\n  <li>Five</li>\n  <li>Six</li>\n  <li>Seven</li>\n</ul>\n\n<ul>\n  <li>Eight</li>\n  <li class=\"hilite\">Nine</li>\n  <li>Ten</li>\n  <li class=\"hilite\">Eleven</li>\n</ul>\n\n<p>Unique siblings: <b></b></p>\n"},{"desc":"Find all siblings with a class \"selected\" of each div.","code":"\n$( \"p\" ).siblings( \".selected\" ).css( \"background\", \"yellow\" );\n","html":"\n<div><span>Hello</span></div>\n<p class=\"selected\">Hello Again</p>\n<p>And Again</p>\n"}],"longdesc":"\n    <p>Given a jQuery object that represents a set of DOM elements, the <code>.siblings()</code> method allows us to search through the siblings 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 selector is supplied, the elements will be filtered by testing whether they match it.</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 its siblings:</p>\n    <pre><code>\n$( \"li.third-item\" ).siblings().css( \"background-color\", \"red\" );\n    </code></pre>\n    <p>The result of this call is a red background behind items 1, 2, 4, and 5. Since we do not supply a selector expression, all of the siblings are part of the object. If we had supplied one, only the matching items among these four would be included.</p>\n    <p>The original element is not included among the siblings, which is important to remember when we wish to find all elements at a particular level of the DOM tree.</p>\n  "}]}