ورود به کارتابل مشتریان وب مهراز
فرزندان در jQuery
یادگیری jQueryDescendant فرزند،نوه و مانند آن است.
توسط جیکوئری می توانید به پایین درخت DOM پیمایش کرده و Descendantعناصر را پیدا کنید.
پیمایش به پایین درخت DOM
متدهای کاربری جیکوئری برای پیمایش به پایین درخت DOM :
children()
find()
متد children() جیکوئری
این متد تمام فرزندان مستقیم عنصر انتخاب شده را بر میگرداند.
این متدل فقط یک مرتبه به پایین درخت DOMپیمایش می کند.
مثال زیر تمام عناصری که فرزندان مستقیم آنها <div> هستندرا برمی گرداند:
<!DOCTYPE html>
<html>
<head>
<style>
.descendants * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div").children().css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body>
<div class="descendants" style="width:500px;">div (current element)
<p>p (child)
<span>span (grandchild)</span>
</p>
<p>p (child)
<span>span (grandchild)</span>
</p>
</div>
</body>
</html>
همچنین با استفاده از پارامتر های اختیاری می توانید برای فیلتر کردن عمل جستجوی فرزندان استفاده کنید.
مثال زیر تمام عناصر<p> را که کلاس آنها به first است و فرزندان مستقیم شان <div> است را بر می گرداند:
<!DOCTYPE html>
<html>
<head>
<style>
.descendants * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div").children("p.first").css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body>
<div class="descendants" style="width:500px;">div (current element)
<p class="first">p (child)
<span>span (grandchild)</span>
</p>
<p class="second">p (child)
<span>span (grandchild)</span>
</p>
</div>
</body>
</html>
متد find()جیکوئری
این متد تمام عناصر فرزند عنصر انتخاب شده را بر می گرداند
مثال زیر تمام عناصر <span> را که فرزند <div> هستند را بر می گرداند:
<!DOCTYPE html>
<html>
<head>
<style>
.descendants * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div").find("span").css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body>
<div class="descendants" style="width:500px;">div (current element)
<p>p (child)
<span>span (grandchild)</span>
</p>
<p>p (child)
<span>span (grandchild)</span>
</p>
</div>
</body>
</html>
این مثال ، تمام فرزندان <div>را بر می گرداند:
<!DOCTYPE html>
<html>
<head>
<style>
.descendants * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div").find("*").css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body>
<div class="descendants" style="width:500px;">div (current element)
<p>p (child)
<span>span (grandchild)</span>
</p>
<p>p (child)
<span>span (grandchild)</span>
</p>
</div>
</body>
</html>
نظر شما
>