JavaScript DHTML/jQuery/parents
Содержание
- 1 Click to find all unique div parent elements of each span.
- 2 Get DIV parent count
- 3 Get form input parent
- 4 Get parents
- 5 Get parent with certain class
- 6 parent(expr): filter the set of parent elements
- 7 parents(expr) gets elements containing the unique ancestors
- 8 Returns true, because the parent of the input is a form element
- 9 Shows the parent of each element as (parent > child). Check the View Source to see the raw html.
Click to find all unique div parent elements of each span.
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ function showParents() { var len = $("span") .parents("div") .css("border", "2px red solid") .length; $("b").text("Unique div parents: " + len); } $("span").click(function () { showParents(); }); }); </script> <style> .selected { color:blue; } </style> </head> <body> <body>
span
span
span
</body>
</html>
</source>
Get DIV parent count
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("span").click(function () { var len = $("span").parents("div").length; alert(len); }); }); </script> </head> <body> <body>
Hello
</body>
</html>
</source>
Get form input parent
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ var input = $(":submit").parent().css({background:"yellow", border:"3px red solid"}); $("#result").text("jQuery matched " + input.length + " elements."); }); </script> </head> <body> <form><input type="submit" /></form>
</body>
</html>
</source>
Get parents
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ var parentEls = $("span").parents() .map(function () { return this.tagName; }) .get().join(", "); $("span").append(parentEls); }); </script> </head> <body> <body>
</body>
</html>
</source>
Get parent with certain class
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").parent(".selected").css("background", "yellow"); }); </script> <style> .y { background:yellow; } </style> </head> <body> <body>
asdf</p>
asdf
</body>
</html>
</source>
parent(expr): filter the set of parent elements
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("*", document.body).each(function () { var parentTag = $(this).parent().get(0).tagName; $(this).prepend(document.createTextNode(parentTag + " > ")); });
}); </script> </head> <body> <body>
p
div
p
p
div
p
div
</body>
</html>
</source>
parents(expr) gets elements containing the unique ancestors
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ var parentEls = $("p").parents() .map(function () { return this.tagName; }) .get().join(", "); $("p").append("" + parentEls + ""); }); </script> </head> <body> <body>
Hello
Hello Again
</body>
</html>
</source>
Returns true, because the parent of the input is a form element
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ alert( $(":checkbox").parent().is("form")); }); </script> </head> <body> <body> <form><input type="checkbox" /></form> </body>
</html>
</source>
Shows the parent of each element as (parent > child). Check the View Source to see the raw html.
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("*", document.body).each(function () { var parentTag = $(this).parent().get(0).tagName; $(this).prepend(document.createTextNode(parentTag + " > ")); });
}); </script> </head> <body> <body>
p
div
p
p
div
p
div
</body>
</html>
</source>