2010-09-16 17:13:38 +00:00
<!DOCTYPE html>
< html lang = 'en' > < head > < meta http-equiv = 'content-type' content = 'text/html; charset=UTF-8' / > < / head > < body >
2010-09-18 16:20:35 +00:00
< div data-role = "page" >
2010-09-21 14:58:54 +00:00
< div data-role = "header" >
2010-09-16 17:13:38 +00:00
< h1 > Descendant Selector (“ancestor descendant”)< / h1 >
< div class = "entry-meta" > Categories:
< span class = "category" > < a href = "http://api.jquery.com/category/selectors/" title = "View all posts in Selectors" > Selectors< / a > > < a href = "http://api.jquery.com/category/selectors/hierarchy-selectors/" title = "View all posts in Hierarchy" > Hierarchy< / a > < / span >
< / div >
< / div >
2010-10-12 19:50:28 +00:00
< div data-role = "content" data-theme = "c" id = "descendant1" >
2010-09-16 17:13:38 +00:00
< h2 class = "jq-clearfix roundTop section-title" >
< span class = "name" > descendant< / span > selector< / h2 >
< div class = " entry-details" >
< h4 class = "name" >
< span class = "versionAdded" > version added: < a href = "/version/1.0/" > 1.0< / a > < / span > jQuery('ancestor descendant')< / h4 >
< ul class = "signatures" > < li > < dl class = "arguments" >
< dt > ancestor< / dt >
< dd > Any valid selector.< / dd >
< dt > descendant< / dt >
< dd > A selector to filter the descendant elements.< / dd >
< / dl > < / li > < / ul >
< p class = "desc" > < strong > Description: < / strong > Selects all elements that are descendants of a given ancestor.< / p >
< div class = "longdesc" > < p > A descendant of an element could be a child, grandchild, great-grandchild, and so on, of that element.< / p > < / div >
< h3 > Example:< / h3 >
< div id = "entry-examples" class = "entry-examples" > < div id = "example-0" >
< h4 > < span class = "desc" > Finds all input descendants of forms.< / span > < / h4 >
< pre > < code class = "example demo-code" > < !DOCTYPE html>
< html>
< head>
< style>
body { font-size:14px; }
form { border:2px green solid; padding:2px; margin:0;
background:#efe; }
div { color:red; }
fieldset { margin:1px; padding:3px; }
< /style>
< script src="http://code.jquery.com/jquery-latest.js"> < /script>
< /head>
< body>
< form>
< div> Form is surrounded by the green outline< /div>
< label> Child:< /label>
< input name="name" />
< fieldset>
< label> Grandchild:< /label>
< input name="newsletter" />
< /fieldset>
< /form>
Sibling to form: < input name="none" />
< script> $("form input").css("border", "2px dotted blue");< /script>
< /body>
< /html> < / code > < / pre >
< h4 > Demo:< / h4 >
< div class = "demo code-demo" > < / div >
< / div > < / div >
< / div >
< / div >
< / div >
< / body > < / html >
