آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش فیلترینگ و محدود کردن جستجو - jquery filtering

دوره های مرتبط با این مقاله

پیمایش در jQuery – فیلترینگ و محدود کردن جستجو

سه متد اصلی برای اعمال فیلترینگ وجود دارد که عبارتند از: first()، last() و eq(). سه متد نام برده به شما این امکان را می دهد که با توجه به موقعیت المان مورد نظر در مجموعه، به دنبال آن بگردید و بدین وسیله جستجو را محدود سازید.

متد ()first

اولین عنصر از بین عناصر انتخاب شده را بازمی گرداند.
مثال زیر اولین المان

که داخل اولین المان <div> قرار دارد را برمی گزیند:

                        <!DOCTYPE html>
                        <html>
                        <head>
                            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
                            <script>
                                $(document).ready(function () {
                                $("div p").first().css("background-color", "yellow");
                                });
                            </script>
                        </head>
                          <body>
                                <h1>Welcome to My Homepage</h1>
                                <p>This is the first paragraph in body.</p>
                                <div style="border: 1px solid black;">
                                <p>This is the first paragraph in a div.</p>
                                <p>This is the last paragraph in a div.</p>
                                </div><br>
                                <div style="border: 1px solid black;">
                                <p>This is the first paragraph in another div.</p>
                                <p>This is the last paragraph in another div.</p>
                                </div>
                                <p>This is the last paragraph in body.</p>
                          </body>
                        </html>
                    

متد ()last

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

                        <!DOCTYPE html>
                        <html>
                        <head>
                                                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
                                                <script>
                            $(document).ready(function () {
                                $("div p").last().css("background-color", "yellow");
                            });
                            </script>
                        </head>
                        <body>
                             <h1>Welcome to My Homepage</h1>
                             <p>This is the first paragraph in body.</p>
                             <div style="border: 1px solid black;">
                             <p>This is the first paragraph in a div.</p>
                             <p>This is the last paragraph in a div.</p>
                            </div><br>
                                 <div style="border: 1px solid black;">
                                 <p>This is the first paragraph in another div.</p>
                                 <p>This is the last paragraph in another div.</p>
                            </div>
                                 <p>This is the last paragraph in body.</p>
                        </body>
                        </html>
                    

متد ()eq

متد ()eq یک عنصر را بر اساس اندیس آن، از میان المان های انتخاب شده بازمی گرداند.
در جاوا اسکریپت شماره گذاری از صفر آغاز می شود نه از 1، بنابراین اولین المان دارای اندیس 0 می باشد. مثال زیر دومین تگ <p> را گزینش می کند:

                        <!DOCTYPE html>
                            <html>
                                <head>
                                     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
                                     <script>
                                    $(document).ready(function () {
                                        $("p").eq(1).css("background-color", "yellow");
                                    });
                                    </script>
                                </head>
                                <body>
                                    <h1>Welcome to My Homepage</h1>
                                    <p>My name is Donald (index 0).</p>
                                    <p>Donald Duck (index 1).</p>
                                    <p>I live in Duckburg (index 2).</p>
                                    <p>My best friend is Mickey (index 3).</p>
                                </body>
                            </html>
                    

متد ()filter

به ما این اجازه را می دهد تا از میان عناصر موجود تنها آن المان هایی که با معیار های مد نظر ما تطبیق دارند را انتخاب کنیم.
نمونه ی زیر تمامی عناصر <p> با class name " intro " را انتخاب می کند:

                        <!DOCTYPE html>
                         <html>
                         <head>
                    
                    
                         </head>
                        <body>
                    

Welcome to My Homepage

My name is Donald.

I live in Duckburg.

I love Duckburg.

My best friend is Mickey.

</body> </html>

متد ()not

متد ()not تمامی عناصری که با معیار تعریف شده منطبق نیستند را انتخاب می کند. متد مذکور در واقع از نظر عملکرد کاملا مخلاف متد ()filter می باشد.
مثال زیر تمامی المان های <p> که کلاس آن ها " intro " نیست را انتخاب می کند:

                        <!DOCTYPE html>
                        <html>
                        <head>
                           <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
                           <script>
                            $(document).ready(function () {
                                $("p").not(".intro").css("background-color", "yellow");
                            });
                            </script>
                        </head>
                        <body>
                           <h1>Welcome to My Homepage</h1>
                           <p>My name is Donald.</p>
                           <p class="intro">I live in Duckburg.</p>
                           <p class="intro">I love Duckburg.</p>
                           <p>My best friend is Mickey.</p>
                        </body>
                        </html>
                    
  • 1645
  •    1950
  • تاریخ ارسال :   1394/07/30

دانلود PDF دانلود سورس کد دانلود فیلم آموزشی دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
آموزش فیلترینگ و محدود کردن جستجو - jquery filtering
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .