ورود به کارتابل مشتریان وب مهراز
اجداد در jQuery
یادگیری jQueryAncestors یا اجداد، یعنی پدر،پدربزرگ ،پدر پدربزرگ و مانند این است.
با استفاده از جیکوئری می توانید در درختDOM به سمت بالا حرکت کرده و Ancestor عناصر را پیدا کنید.
Traversing به سمت بالا در درخت DOM
سه متد پرکاربرد برای پیمایش به بالا در درخت DOM :
• parent()
• parents()
• parentsUntil()
متد parent()
این متد عنصر والد مستقیم را از عنصر انتخاب شده کرده و برمی گرداند.
این متد فقط یک مرتبه از درختDOM را پیمایش می کند.
مثال زیر عنصر والد مستقیم را از هر عنصر<span> برمی گرداند:
<!DOCTYPE html>
<html>
<head>
<style>
.ancestors * {
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(){
$("span").parent().css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body>
<div class="ancestors">
<div style="width:500px;">div (great-grandparent)
<ul>ul (grandparent)
<li>li (direct parent)
<span>span</span>
</li>
</ul>
</div>
<div style="width:500px;">div (grandparent)
<p>p (direct parent)
<span>span</span>
</p>
</div>
</div>
</body>
</html>
متد parents() جیکوئری
این متد تمام عناصر جد عنصر انتخاب شده را به عناصر ریشه سند برمی گرداند.
مثال زیر تمام اجداد عنصر <span> را بر می گرداند:
<!DOCTYPE html>
<html>
<head>
<style>
.ancestors * {
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(){
$("span").parents().css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body class="ancestors">body (great-great-grandparent)
<div style="width:500px;">div (great-grandparent)
<ul>ul (grandparent)
<li>li (direct parent)
<span>span</span>
</li>
</ul>
</div>
</body>
<!-- The outer red border, before the body element, is the html element (also an ancestor) -->
</html>
همچنین شما می توانید از پارامتر های اختیاری برای فیلتر کردن جستجوی اجداد استفاده کنید.
مثال زیر تمام اجداد عناصر <span> که <ul> هستند را بر می گرداند:
<!DOCTYPE html>
<html>
<head>
<style>
.ancestors * {
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(){
$("span").parents("ul").css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body class="ancestors">body (great-great-grandparent)
<div style="width:500px;">div (great-grandparent)
<ul>ul (grandparent)
<li>li (direct parent)
<span>span</span>
</li>
</ul>
</div>
</body>
</html>
متدparentsUntil() جیکوئری
این متد تمام اجداد عناصر بین دو پارامتر ورودی را بر می گرداند.
مثال زیر ، تمام اجدادعناصر بی دو عنصر <span>و <div> را برمی گرداند:
<!DOCTYPE html>
<html>
<head>
<style>
.ancestors * {
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(){
$("span").parentsUntil("div").css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body class="ancestors"> body (great-great-grandparent)
<div style="width:500px;">div (great-grandparent)
<ul>ul (grandparent)
<li>li (direct parent)
<span>span</span>
</li>
</ul>
</div>
</body>
</html>
نظر شما
>