021-28423015
021-28423015

فرزندان در jQuery

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

 

 


نظر شما

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

مقالات و دروس

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

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

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

مقالات مرتبط