برچسب: پیمایش عناصر html در جی کوئری

آموزش 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 استفاده نمایید تا فرزند های خاصی از تگها را انتخاب نمایید .

 

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

<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 ) استفاده میشوند :

<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 میگردد و آن عنصر را بر میگرداند .

این تابع شبیه تابع 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