آموزش جی کوئری – پیمایش فرزندان در جی کوئری

در بخش قبلی با پیمایش اجداد در جی کوئری آشنا شدیم. در این قسمت از سری آموزش جی کوئری, نحوه پیمایش فرزندان در جی کوئری را یاد می گیریم.

پیمایش فرزندان در جی کوئری

jQuery چند متد مفید ازجمله children() و find() را ارایه داده است که می توانید از آن برای پیمایش بصورت تکی یا چندمرحله ای در درخت DOM به منظور یافتن فرزندان المان بصورت سلسله مراتب, استفاده کنید.

متد children() جی کوئری

متد children() در جی کوئری برای دریافت فرزندان مستقیم المان انتخاب شده استفاده می شود.

مثال زیر فرزند مستقیم المان <ul> که <li> است را با افزودن کلاس .highlight مشخص می کند.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery children() Demo</title>
<style type="text/css">
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("ul").children().addClass("highlight");
});
</script>
</head>
<body>
    <div class="container">
        <h1>Hello World</h1>
        <p>This is a <em>simple paragraph</em>.</p>
        <ul>
            <li>Item One</li>
            <li>Item Two</li>
        </ul>
    </div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>jQuery children() Demo</title>

.highlight{

background: yellow;

}

</style>

$(document).ready(function(){

$("ul").children().addClass("highlight");

});

</script>

</head>

<body>

<h1>Hello World</h1>

<p>This is a <em>simple paragraph</em>.</p>

<ul>

</ul>

</div>

</body>

</html>

متد find() جی کوئری

متد find() در جی کوئری برای دریافت فرزندان یا نسل المان انتخاب شده استفاده می شود.

متد های children() و find() مشابه هم هستند با این تفاوت که متد find() بین چند سطح (level) مختلف پایین تا اخرین فرزند درخت DOM جستجو می کند.

اما متد children() فقط یک سطح از درخت DOM را تا پایین پیش می رود.

مثال زیر یک border را به تمام المان های <li> که فرزندان المان <div> است اضافه می کند.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery find() Demo</title>
<style type="text/css">
    *{
        margin: 10px;
    }
    .frame{
        border: 2px solid green;
    }        
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("div").find("li").addClass("frame");
});
</script>
</head>
<body>
    <div class="container">
        <h1>Hello World</h1>
        <p>This is a <em>simple paragraph</em>.</p>
        <ul>
            <li>Item One</li>
            <li>Item Two</li>
        </ul>
    </div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>jQuery find() Demo</title>

margin: 10px;

}

.frame{

border: 2px solid green;

}

</style>

$(document).ready(function(){

$("div").find("li").addClass("frame");

});

</script>

</head>

<body>

<h1>Hello World</h1>

<p>This is a <em>simple paragraph</em>.</p>

<ul>

</ul>

</div>

</body>

</html>

به هر حال, اگر قصد دارید که تمام فرزندان المان های فرزند را بدست آورید از سلکتور جهانی (universal) که با * مشخص می شود استفاده کنید.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery find() Demo</title>
<style type="text/css">
    *{
        margin: 10px;
    }
    .frame{
        border: 2px solid green;
    }        
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("div").find("*").addClass("frame");
});
</script>
</head>
<body>
    <div class="container">
        <h1>Hello World</h1>
        <p>This is a <em>simple paragraph</em>.</p>
        <ul>
            <li>Item One</li>
            <li>Item Two</li>
        </ul>
    </div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>jQuery find() Demo</title>

margin: 10px;

}

.frame{

border: 2px solid green;

}

</style>

$(document).ready(function(){

$("div").find("*").addClass("frame");

});

</script>

</head>

<body>

<h1>Hello World</h1>

<p>This is a <em>simple paragraph</em>.</p>

<ul>

</ul>

</div>

</body>

</html>

امیدوارم در این بخش آموزش جی کوئری, از پیمایش فرزندان در جی کوئری نهایت استفاده را برده باشید.

در قسمت بعد نحوه پیمایش هم نیاها (sibligns) در جی کوئری را آموزش خواهیم داد.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید

آموزش جی کوئری – پیمایش فرزندان در جی کوئری

پیمایش فرزندان در جی کوئری

متد children() جی کوئری

متد find() جی کوئری

لغو پاسخ

دوره آموزش ساخت دیجی کالا با php به همراه اپلیکیشن اندروید

آموزش ساخت ربات تلگرام با PHP (از پایه و پروژه محور)

دوره جامع آموزش طراحی سایت + پروژه قالب فروشگاه