فیلترکردن تگ‌ ها در جی کوئری

تگی را که با selector انتخاب کرده اید و لیستی از تگ ها (برای مثال فرزندان تگ انتخاب شده) در دسترس شما قرار می گیرد، jQuery متدهایی را جهت فیلتر کردن این لیست با اهداف مختلف فراهم کرده است؛ متدهایی مانند متد ()filter، متد ()first، متد ()last، متد ()eq، متد ()slice، متد ()has، متد ()not و...

از این متدها برای کم کردن با جستجو در درخت DOM استفاده کنید.

متد ()first در jQuery

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

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery first() 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 li").first().addClass("highlight");
});
</script>
</head>
<body>
    <ul>
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item</li>
        <li>Last list item</li>
    </ul>
</body>
</html><!DOCTYPE html>

متد ()last در jQuery

متد ()last در jQuery، لیست تگ های دریافتی را فیلتر می کند و آخرین تگ در لیست دریافتی را بر می گرداند.

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery last() 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 li").last().addClass("highlight");
});
</script>
</head>
<body>
    <ul>
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item</li>
        <li>Last list item</li>
    </ul>
</body>
</html>

متد ()eq در jQuery

متد ()eq بر اساس آرگومان ورودی و اجرای فیلتر روی لیست های دریافتی، عددی را که به عنوان index (ایندکس) دریافت کرده است، با ایندکس تگ های دریافتی مطابقت می دهد و آن تگی را که ایندکسش با ایندکس ورودی متد ()eq برابر باشد، بر می گرداند و یا در واقع در دسترس قرار می دهد.

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery eq() 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 li").eq(1).addClass("highlight");
});
</script>
</head>
<body>
    <ul>
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item</li>
        <li>Last list item</li>
    </ul>
</body>
</html>

نکته: تگ های درخت DOM را به صورت درختی در آرایه ای تصور کنید. بنابراین ایندکس 0 این آرایه به تگ اول درخت DOM و ایندکس 1 آرایه به تگ دوم درخت DOM اشاره می کند. برای مثال، در کد بالا ما به کمک eq تگ دوم را درخواست می کنیم. ایندکس این تگ در آرایه، 1 می باشد.

نکته مهم دیگر این است که ایندکسی که در اینجا به آن اشاره شده است، ایندکس آن تگ بین لیست تگ های فیلتر شده است و ارتباطی به ایندکس آن تگ در درخت DOM ندارد.

همچنین شما می توانید برای ایندکس از یک عدد منفی استفاده کنید، عدد منفی به آخر لیست اشاره می کند. پس ایندکس 2- یعنی تگی که از آخر سوم است.

در کد مثال زیر این کاربرد را مشاهده می کنید:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery eq() 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 li").eq(-2).addClass("highlight");
});
</script>
</head>
<body>
    <ul>
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item</li>
        <li>Fourth list item</li>
    </ul>
</body>
</html>

متد ()filter در jQuery

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

selector یا تابع مورد نظر دریافت می شود و پس از بررسی و مطابقت دادن با لیست همه عناصر انتخاب شده، عناصری که بر اساس بررسی و تست ()filter انتخاب شده باشند، برگردانده می شوند و در دسترس قرار می گیرند.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery filter() 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 li").filter(":even").addClass("highlight");
});
</script>
</head>
<body>
    <ul>
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item</li>
        <li>Fourth list item</li>
    </ul>
</body>
</html>

همان طور که در کد بالا مشاهده می کنید بر اساس شرط یا تابعی که به متد ()filter ارسال شده است، عناصر دریافتی فیلتر می شوند.

در مثال زیر نیز، بین تگ های <li> آن هایی که ایندکس فرد داشته باشند در دسترس قرار گرفته و هایلایت می شوند (ایندکس از صفر شروع می شود):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery filter() 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 li").filter(function(index){
        return index % 2 !== 0;
    }).addClass("highlight");
});
</script>
</head>
<body>
    <ul>
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item</li>
        <li>Last list item</li>
    </ul>
</body>
</html>

متد ()has در jQuery

با استفاده از متد ()has در jQuery عناصر یا تگ هایی انتخاب می شوند که در شرط ورودی این متد صدق می کنند. در مثال زیر این کاربرد بررسی شده است.

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery filter() 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 li").has("ul").addClass("highlight");
});
</script>
</head>
<body>
    <ul>
        <li>Section 1</li>
        <li>Section 2</li>
        <li>
            <ul>
                <li>Section 2.1</li>
                <li>Section 2.2</li>
                <li>Section 2.3</li>
            </ul>
        </li>
        <li>Section 4</li>
    </ul>
</body>
</html>

متد ()not در jQuery

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

در کد مثال زیر بین تگ های دریافتی متد ()not، آن هایی برگردانده می شوند که ایندکسشان زوج نباشد (یعنی ایندکس فرد باشد و توجه کنید که ایندکس از 0 شروع می شود):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery not() 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 li").not(":even").addClass("highlight");
});
</script>
</head>
<body>
    <ul>
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item</li>
        <li>Fourth list item</li>
    </ul>
</body>
</html>

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

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery not() 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 li").not(function(index){
        return index % 2 !== 0;
    }).addClass("highlight");
});
</script>
</head>
<body>
    <ul>
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item</li>
        <li>Fourth list item</li>
    </ul>
</body>
</html>

متد ()slice در jQuery

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

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery slice() 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 li").slice(0, 2).addClass("highlight");
});
</script>
</head>
<body>
    <ul>
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item</li>
        <li>Fourth list item</li>
    </ul>
</body>
</html>

می توانید ایندکس را به صورت عدد منفی به متد ()slice بدهید. به جای شروع از ابتدای لیست تگ ها، از آخر حساب می کند. برای مثال (-1 , -2)slice فقط سومین عنصر لیست را هایلایت می کند، زیرا تنها عنصری که از آخر در محدوده 2- و 1- قرار می گیرد، تگ <li> سوم است.

در کد زیر این مثال آورده شده است:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery slice() 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 li").slice(-2, -1).addClass("highlight");
});
</script>
</head>
<body>
    <ul>
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item</li>
        <li>Fourth list item</li>
    </ul>
</body>
</html>

در ادامه، قسمت بعدی را به Ajax و متدهای آن اختصاص می دهیم.