آموزش jQuery – فصل هفتم : پیمایش عناصر html ( Tree Traversal ( .

فصل هفتم :

پیمایش عناصر html : ( Tree Traversal ) :

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

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

به عنوان مثال در کد روبرو :

 

<html>

 

<head>

 

<title> test page </title>

 

</head>

 

<body >

 

<div>

 

<ul>

 

<li> one </li>

 

<li> two </li>

 

<li> three </li>

 

</ul>

 

</div>

 

</body>

 

</html>

در مثال بالا :

· همه تگ ها فرزند تگ html هستند

· تگ head پدر تگ title و در نتیجه تگ title فرزند تگ head می باشد .

· تگ ها li همسایه یا هم نژاد (برادر یا خواهر ) یکدیگر هستند و همگی فرزند ul هستند و همچنین در سطح بالاتر فرزند تگ div و body و html .

· تگ ul نیز فرزند div و body و html است .

· تگ body همسایه تگ head و فرزند html است .

 

با توجه به تعاریف فوق . توابعی در jQuery برای پیمایش درختی عناصر html ایجاد شده که در این فصل آنها را شرح خواهیم داد :

 

$(selector).children([selector]) :

$(selector).parent([selector]);

تابع children() فرزندهای عنصر انتخابی را بر میگرداند . به عنوان مثال :

 

$(‘ul’).children().css(‘background’,’Red’);

دستور بالا باعث میشود رنگ پیش زمینه تمام تگهای درون تگ ul (فرزند های ul یا همان تگهای li ) قرمز شود .

همچنین شما میتوانید از آرگومان selector استفاده نمایید تا فرزند های خاصی از تگها را انتخاب نمایید .

بیشتر بخوانید  آموزش jQuery - فصل اول

 

به مثال زیر توجه نمایید :

<div>

<span>Hello</span>

<p class=”selected”>Hello Again</p>

<div class=”selected”>And Again</div>

 

<p>And One Last Time</p>

</div>

اگر در این مثال کد زیر را اجرا کنیم :

$(“div”).children(“.selected”).css(“color”, “blue“);

در این مثال فرزندهایی از تگهای div انتخاب میکند که دارای کلاس selected باشد بنابر این نتیجه دستور فوق :

Hello
Hello Again

And Again

At One Last Time

 

تابع parent() پدر عناصر انتخابی را بر میگرداند (اولین پدر ) .

$(‘li’).parent().addClass(‘listExpander’);

در این مثال به اولین والد عناصر li در صفحه کلاس listExpander را اعمال میکند .

همانند تابع children() این تابع نیز میتواند مقدار selector را قبول کند :

<div class=”one”>

<div class=”two”>

<span class=”text” > click </span>

</div>

<div>

در مثال فوق :

$(‘span’).parent() :

به div با کلاس two اشاره میکند . در صورتی که

$(‘span’).parent(‘.one’) :

به div با کلاس one اشاره میکند .

 

نکته : دقت نمایید که تابع parent() فقط یک عنصر را به عنوان پدر بر میگرداند . اگر بخواهید همه والدهای یک عنصر را برگردانید میتوانید از تابع parents() استفاده کنید :

$(‘span’).parents() :

در این مثال تمام والد های span (یعنی هم div با کلاس two و هم div با کلاس one ) را بر میگرداند .

 

تابع : parentsUntil() :

$(selector).parentsUntil([parent_selector]);

(کلمه until به معنی “تا اینکه ” می باشد و همانطور که از معنی این عبارت مشخص است تابع فوق تمامی والدهای عنصر selector را تا رسیدن به عنصر parent_selector بر میگرداند .

به عنوان مثال اگر در مثال اول این فصل کد زیر را بنویسیم :

$(‘li’).parentsUntil(‘body’).addClass(‘test’);

به تمام تگ های والد li تا تگ body (تگهای ul و div ) کلاس test را اضافه میکند .

 

تابع next() و pv() :

$(selector).next([selector]);

$(selector).pv([selector]);

این دو تابع هم همانطور که از نامشان پیداست برای بدست آوردن عنصر بعدی ( next ) و عنصر قبلی ( pv ) استفاده میشوند :

بیشتر بخوانید  کتاب آموزش jQuery : دانلود متن کامل به زبان فارسی بصورت pdf

<ul>

<li>list item 1</li>

<li>list item 2</li>

<li class=”third-item”>list item 3</li>

<li>list item 4</li>

<li class=”test”>list item 5</li>

</ul>

در مثال فوق با اجرای کد :

$(‘li.third-item’).next().css(‘color’, ‘red’);

کد فوق باعث میشود عبارت list item 4 به رنگ قرمز نمایش داده شود .

 

$(‘li.third-item’).next().css(‘color’, ‘blue’);

این کد عبارت list item 2 را به رنگ آبی نمایش میدهد .

$(‘li.third-item’).next(‘.test’).css(‘background-color’, ‘blue’);

این کد عبارت list item 5 را با پیش زمینه آبی نمایش میدهد .

 

$(‘li.third-item’).next(‘.test’).pv().css(‘background-color’, ‘Red’);

این کد عبارت list item 4را با پیش زمینه قرمز نمایش میدهد .

 

نکته : توابع زیر نیز برای پیمایش بهتر عناصر قبلی و بعدی در jquery ایجاد شده اند :

$(selector).nextAll([nextselector])

$(selector).pvAll([pvselector])

تمام عناصر بعد next و قبل pv از selector را بر میگرداند (مطابق با nextselector یا pvselector )

 

$(selector).nextUntil([nextselector])

$(selector).pvUntil([pvselector])

تمام عناصر بعد next و قبل pv از selector را تا عنصر nextselector و pvselector بر میگرداند .

 

 

تابع siblings() :

$(selector).siblings([sibling_selector])

این تابع هم نژاد های selector را بر میگرداند . و در صورتی که sibling_selector مشخص شده باشد مقادیری که با این عناصر مطابق باشند بر می گرداند .

 

<!DOCTYPE html>

<html>

<head>

<script src=”http://code.jquery.com/jquery-latest.js”></script>

</head>

<body >

<ul>

<li > one </li>

<li class=”test” > two </li>

<li class=”test2″ > three </li>

</ul>

<script>

$(“li.test”).siblings().css(“background”, “yellow”);

</script>

</body>

</html>

در مثال بالا به غیر از خود li با کلاس test ، رنگ پیش زمینه زرد به سایر li ها اضافه میشود .

در صورتیکه کد بالا را به شکل زیر تغییر دهیم فقط li هایی انتخاب میشوند که دارای کلاس test2 باشند :

$(‘li.test’).siblings(‘.test2’).css(‘background’,’yellow’);

 

تابع find() :

$(selector).find(find_selector)

تابه find در فرزندهای selector به دنبال find_selector میگردد و آن عنصر را بر میگرداند .

بیشتر بخوانید  کد جاوااسکریپت غذای تصادفی از وبسایت res2ran.com

این تابع شبیه تابع children() عمل میکند و تنها تفاوت آن این است که تابع children فقط یک سطح فرزند را جستجو میکند . همچنین در تابع find(selector) پارامتر selector الزامی است (میتوان برای انتخاب همه از عبارت ‘*’ استفاده کرد ) :

$(selector).find(‘*’)

مثال :

<ul class=”level-1″>

<li class=”item-i”>I</li>

<li class=”item-ii”>II

<ul class=”level-2″>

<li class=”item-a”>A</li>

<li class=”item-b”>B

<ul class=”level-3″>

<li class=”item-1″>1</li>

<li class=”item-2″>2</li>

<li class=”item-3″>3</li>

</ul>

</li>

<li class=”item-c”>C</li>

</ul>

</li>

<li class=”item-iii”>III</li>

</ul>

اگر در مثال فوق کد زیر را بنویسیم :

$(‘li.item-ii’).find(‘li’).css(‘background-color’, ‘red’);

این کد رنگ پیش زمینه عبارت های A , B , 1 ,2,3, C را قرمز میکند . اما همین عمل با تابع children تنها بر روی عبارات A,B,C اعمال میشود .

 

 

تابع closest() :

$(selector).closest(closest_selector)

این تابع هم مانند parents() عمل میکند . اما تفاوت هایی بین این دو تابع وجود دارد :

· تابه closest از خود عنصر انتخابی پیمایش را شروع میکند . در صورتی که تابع parents از اولین والد شروع به پیمایش میکند .

· تابع closest عملیات پیمایش را تا رسیدن به عنصر انتخابی (closest_selector ) انجام میدهد در صورتی که در تابع parents ابتدا عملیات تا انتها (root ) انجام میشود . سپس همه عناصر انتخاب شده در یک متغیر temp ریخته شده و سپس آنهایی که مطابق با شرط (عنصر selector ) می باشد را از بین آنها انتخاب میکند . بنابراین سرعت اجرای تابع closest بیشتر است .

· تابع closest میتواند صفر یا یک عنصر بر گرداند در صورتی که تابع parents صفر یا یک یا چند عنصر بر میگرداند .

 

در مثال بالا :

$(‘li.item-a’).closest(‘ul’).css(‘background-color’,’red’)

باعث میشود رنگ پیش زمینه ul با کلاس level-2 قرمز شود .

 

مرجع فصل : http://api.jquery.com/category/traversing/tree-traversal

 

8 دیدگاه در “آموزش jQuery – فصل هفتم : پیمایش عناصر html ( Tree Traversal ( .”

  1. مرسی داداش، دمت خیلی گرمه
    اگه از ASP.NET یه آموزش خوب و کامل مثل همین داری بزاری ممنون میشیم.
    به هر حال TNX

    پاسخ

  3. سلام
    آقا واقعا عالی بود
    میخوام سی دی کتاب رو داشته باشم.چطور میتونم تهیه کنم. خواهشن جواب بدید.امروز دو سه تا کتاب فروشی رفتم ولی نداشتن
    کد چت رو لازم دارم.هزینه هم روی چشم
    تشکر

    پاسخ

  4. سلام دوست عزیز من آموزشتون رو خوندم خیلی عالیه

    یه مشکلی دارم توینوشتم منو های چند سطحی اگر لطف کنید بگید کجا باید مطرح ککنم تا در صورت امکان کمک کنید
    مرسی
    موفق باشید

    پاسخ

    1. اقای مجتبی اگر عبارتی مثل dropdown menu یا jquery menu را جستجو کنید حتما اسکریپت مورد نظر خودتونو پیدا میکنید .

      پاسخ

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *