JavaScript Tutorial/jQuery/parents — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
| |
Текущая версия на 08:25, 26 мая 2010
Содержание
- 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.
<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>
<div>
<div><span>span</span></div>
<span>span</span>
</div>
<div>
<span>span</span>
</div>
<b></b>
</body>
</html>
Get DIV parent count
<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>
<div>
<div><span>Hello</span></div>
</div>
</body>
</html>
Get form input parent
<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>
<div id="result"></div>
</body>
</html>
Get parents
<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>
<div>
<p>
<span>
</span>
</p>
</div>
</body>
</html>
Get parent with certain class
<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>
<div><span class="selected">asdf</p></span>
<span>asdf</span>
</div>
</body>
</html>
parent(expr): filter the set of parent elements
<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>p</p>
<div>div</div>
<p>p</p>
<p>p</p>
<div>div</div>
<p>p</p>
<div>div</div>
</body>
</html>
parents(expr) gets elements containing the unique ancestors
<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("<strong>" + parentEls + "</strong>");
});
</script>
</head>
<body>
<body>
<div><p>Hello</p></div>
<div class="selected"><p>Hello Again</p></div>
</body>
</html>
Returns true, because the parent of the input is a form element
<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>
Shows the parent of each element as (parent > child). Check the View Source to see the raw html.
<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>p</p>
<div>div</div>
<p>p</p>
<p>p</p>
<div>div</div>
<p>p</p>
<div>div</div>
</body>
</html>