آموزش jQuery پیشرفته : دسترسی به تگ‌های فرزند

در این قسمت از آموزش مطالب jQuery پیشرفته به این می پردازیم که با استفاده از انتخاب یک عنصر یا تگ به عناصر یا تگ های فرزند آن تگ دسترسی پیدا کنیم. همچنین به این می پردازیم که این دسترسی را چگونه از طریق آن تگ به تگ های هم سطحش داشته باشیم.

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

متد ()children در jQuery

با استفاده از متد ()children در jQuery می توانید به فرزندان یک عنصر یا تگ دسترسی داشته باشید. همان طور که در کد مثال زیر مشاهده می کنید، با استفاده از Selector تگ ul انتخاب می شود و با استفاده از متد ()children به فرزند تگ <ul> یعنی تگ <li> دسترسی ایجاد می شود، سپس با استفاده از متد ()addClass، کلاس highlight. به آن اضافه می گردد:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery children() Demo</title>
<style>
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jQuery.com/jQuery-1.12.4.min.js"></script>
<script>
$(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>

متد ()find در jQuery

با متد ()find در jQuery می توانید به همه فرزندان یک عنصر یا تگ در همه سطوح دسترسی داشته باشید. مکانیزم متدهای ()find و ()children بسیار مشابه هستند، با این تفاوت که ()find برای در دسترس قرار دادن فرزندان یک عنصر یا تگ، همه سطوح درخت DOM را تا آخرین سطح فرزندان، برای ایجاد دسترسی به فرزندان جستجو می کند اما متد ()children فقط فرزندان اصلی یک تگ یا عنصر را در دسترس قرار می دهد. منظور از فرزندان اصلی همان فرزندان سطح اول در درخت DOM است.

در مثال زیر مشاهده می کنید یک border به تگ <li> اضافه می شود، که در این جا آن تگ <li> به عنوان فرزند یکی از سطوح تگ <div> فیلتر و انتخاب شده است:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery find() Demo</title>
<style>
    *{
        margin: 10px;
    }
    .frame{
        border: 2px solid green;
    }        
</style>
<script src="https://code.jQuery.com/jQuery-1.12.4.min.js"></script>
<script>
$(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>

اما اگر می خواهید به همه فرزندان یک تگ یا عنصر (در همه سطوح) دسترسی داشته باشید، می توانید از انتخابگر یا selctor ("*") کلی استفاده کنید. در کد زیر این کاربرد را مشاهده می کنید:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery find() Demo</title>
<style>
    *{
        margin: 10px;
    }
    .frame{
        border: 2px solid green;
    }        
</style>
<script src="https://code.jQuery.com/jQuery-1.12.4.min.js"></script>
<script>
$(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>

دسترسی به عناصر هم سطح در درخت DOM

از دید روابط منطقی، عناصر یا تگ های هم سطح با یک عنصر یا تگ، عناصر یا تگ هایی هستند که والد مشترک با یکدیگر دارند. jQuery متدهایی را برای این نوع دسترسی و پیمایش در DOM فراهم کرده است. این متدها عبارتند از: ()siblings() ،next() ،nextAll() ،nextUntil() ،prev() ،prevAll() ،prevUntil.

متد ()siblings در jQuery

با استفاده از متد ()siblings می توانید به تگ های هم سطح با یک عنصر انتخاب شده برسید. کد مثال زیر تگ های هم سطح با تگ <p> را هایلایت می کند و کلاس highlight. را زمانی که document در حالت ready قرار گرفته باشد، به تگ های <h1> و <ul> اضافه می کند:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery siblings() Demo</title>
<style>
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jQuery.com/jQuery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $("p").siblings().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>

شما می توانید با دادن یک یا چند selector به عنوان پارامتر به متد ()siblings، تگ های جستجو شده را به صورت فیلتر شده انتخاب کنید و عملکردی را که می خواهید بر آن ها اعمال کنید.

مثال زیر border را بین تگ های هم سطح با عنصر <p> فقط بر تگ یا عنصر <ul> اعمال می کند. زیرا در کد زیر ul به عنوان selector به متد ()siblings فرستاده شده است:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery siblings() Demo</title>
<style>
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jQuery.com/jQuery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $("p").siblings("ul").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>

متد ()next در jQuery

با متد ()next در jQuery می توانید در DOM به عنصری که بعد از عنصر انتخاب شده آمده باشد، دسترسی داشته باشید.

در مثال زیر تگ <ul> که بعد از تگ <p> آمده است و با تگ یا عنصر <p> هم سطح هست، هایلایت می شود. این رویداد را که با افزودن کلاس highlight. به تگ <ul> رخ می دهد، می توانید در کد زیر مشاهده کنید:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery next() Demo</title>
<style>
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jQuery.com/jQuery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $("p").next().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>

متد ()nextAll در jQuery

با استفاده از متد ()nextAll می توانید، به همه عناصری که بعد از عنصر انتخاب شده می آیند، دسترسی داشته باشید.

در کد مثال زیر همه عناصری که بعد از تگ <p> آمده باشند، هایلایت می شوند. این کاربرد را که با افزودن کلاس highlight. به عناصر رخ می دهد، می توانید در کد زیر مشاهده کنید:

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

متد ()nextUntil در jQuery

با استفاده از متد ()nextUntil می توانید به تگ هایی که بعد از تگ انتخاب شده می آیند، دسترسی داشته باشید. اما این دسترسی ها تا عنصر خاصی ادامه دارد. شما این عنصر را به عنوان آرگومان ورودی به متد ()nextUntil ارسال می کنید و دسترسی های شما تا قبل از این عنصر یا تگ خواهد بود.

در مثال زیر همان طور که مشاهده می کنید می توانید به تگ هایی که بعد از تگ <h1> می آیند و در واقع هم سطح آن نیز هستند، دسترسی داشته باشید و کد خود را که در این جا هایلایت کردن تگ هاست، بر آن ها اعمال کنید. اما هایلایت شدن تگ ها یا عناصر شامل تگ <ul> نمی شود و تا قبل از آن تگ را شامل می شود. به این دلیل که ul به عنوان یک تگ در آرگومان ورودی به متد ()nextUntil ارسال شده است. دسترسی های شما در کد مثال زیر، شامل تگ هایی هستند که بین <h1> و <ul> می آیند:

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

متد ()prev در jQuery

متد ()prev در jQuery به تگی که بعد از تگ انتخاب شده، آمده باشد دسترسی دارد.

برای مثال در کد زیر می توانید به تگ آن <p> که قبل از تگ <ul> آمده است، دسترسی داشته باشید و کد jQuery خود را که در این جا هایلایت کردن تگ است، به آن اعمال کنید:

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

متد ()prevAll در jQuery

با استفاده از ()prevAll در jQuery می توانید به همه تگ ها یا عناصری که قبل از یک عنصر آمده باشند، دسترسی داشته باشید. در واقع شما با این متد به تگ های هم سطح با تگ انتخاب شده که قبل از تگ شده قرار گرفته باشند، دسترسی دارید که به آن ها تگ های sibling می گوییم.

در کد مثال زیر به همه تگ هایی که قبل از تگ <ul> آمده باشند، دسترسی دارید و کلاس highlight به آن تگ ها اضافه می شود:

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

متد ()prevUntil در jQuery

با متد ()prevUntil می توانید به همه تگ هایی که قبل از تگ انتخاب شده آمده باشند، دسترسی داشته باشید اما با محدودیت هایی این دسترسی وجود دارد.

شما تا عنصر خاصی از عناصر هم سطح قبلی دسترسی دارید. در واقع تگی را به عنوان آرگومان به متد ()prevUntil می دهید و به عناصر تا قبل از آن که به آن تگ خاص برسید، دسترسی خواهید داشت.

در کد مثال زیر به عناصری بین <ul> و <h1> که هم سطح با این عناصر هستند، دسترسی خواهید داشت و می توانید با افزودن کلاس highlight. به آن عنصرها، اقدام به هایلایت کردن آن ها کنید:

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

در قسمت بعدی به ادامه مبحث jQuery پیشرفته و دسترسی ها خواهیم پرداخت.

دیدگاه‌های شما (1 دیدگاه)

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

اشکان کیانی

14 فروردین 1399

با تشکر از این دوره آموزشی. خیلی مفید و عالی بود. بسیار روان و بدون هرگونه گزاف گویی. دست شما درد نکنه. امید که آموزش های جدید بیاد. تمام آموزش جیکوری تون درست بود به غیر این آموزش که جمله زیر باید درست شود متد ()prev در jQuery به تگی که بعد از تگ انتخاب شده، آمده باشد دسترسی دارد. کلمه بعد باید بشه قبل.