021-28423015
021-28423015

اجداد در jQuery

Ancestors یا اجداد، یعنی پدر،پدربزرگ ،پدر پدربزرگ و مانند این است.
با استفاده از جیکوئری می توانید در درخت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>

 

 

 


نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

مقالات و دروس

عضویت در خبرنامه شرکت نرم افزاری وب مهراز

برای اطلاع از بسته ها ، تخفیف های استثنایی و تازه های ما به خبرنامه وب مهراز بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط