انتخاب عناصر بر اساس Attribute در جی کوئری

مسئله

ما نیاز داریم تا عناصری را بر اساس خصوصیت(attributes) آنها و  مقدار خصوصیت(attributes’ values) آنها انتخاب کنیم.

راه حل

برای انجام این کار می توانیم از یک سلکتور خصوصیت(attribute) برای تطابق دادن خصوصیت ها و مقدار آنها استفاده کنیم:

jQuery('a[href="http://google.com"]');

سلکتور بالا، تمام عناصر لینک یعنی a که خصوصیت href آنها برابر با یک مقدار(http://google.com) است را انتخاب می کند.

راه های متفاوتی برای استفاده از سلکتور خصوصیت(attribute) وجود دارد:

 [attr]

عناصری را مورد تطابق قرار می دهد که یک خصوصیت(attribute) خاص دارند.

 [attr=val]

عناصری را مورد تطابق قرار می دهد که یک خصوصیت(attribute) با یک مقدار خاص(value) دارند.

[attr!=val]

عناصری را مورد تطابق قرار می دهد که یک خصوصیت(attribute) مشخص شده  یا یک مقدار(value)  برای این خصوصیت را ندارند.

[attr^=val]

عناصری را مورد تطابق قرار می دهد که یک خصوصیت(attribute) مشخص شده را دارند و اینکه این خصوصیت با یک مقدار خاص(value)  شروع می شود.

[attr$=val]

عناصری را مورد تطابق قرار می دهد که ک خصوصیت(attribute) خاص دارند که با یک مقدار خاص پایان می یابد.

[attr~=val]

عناصری را مورد تطابق قرار می دهد که حاوی یک مقدار خاص با فاصله( specified value with spaces) در هریک از اطرف آن هستند(مثلا car عبارت car را مورد تطابق قرار می دهد نه cart را)

 نکته: قبل از جی کوئری 1.2 ما مجبور بودیم از سینتکس XPath استفاده کنیم(مثلا باید قبل از یک نام خصوصیت(attribute) از علامت @ استفاده می کردیم). اما این کار دیگر منقضی شده است.

ما همچنین می توانیم چند سلکتور خصوصیت(attribute ) را با یکدیگر ترکیب کنیم:

jQuery('*[title][href]');

در کد بالا، تمام عناصری که یک TITLE و HREF دارند انتخاب می شوند.

توضیحات

 مانند همیشه، برای نیازهای ضروری، مناسب تر است که از متد filter() برای مشخص تر کردن آنچه که ما به دنبال آن هستیم استفاده کنیم:

jQuery('a').filter(function(){
  return (new RegExp('http:\/\/(?!' + location.hostname + ')')).test(this.href);
});

 در فیلتر بالا، از یک عبارت منظم(regular expression) استفاده شده است که خصوصیت href تمام لینک ها را تست می کند. این فیلتر، تمام لینک های اکسترنال درون هر صفحه ای(page) را انتخاب می کند. سلکتور خصوصیت(attribute selector) به خصوص برای انتخاب عناصر بر اساس اینکه مقدار خصوصیت آنها کمی تفاوت دارد استفاده می شود. بعنوان مثال، اگر کدهای html زیر را داشته باشیم:

<div id="content-sec-1">...</div>
<div id="content-sec-2">...</div>
<div id="content-sec-3">...</div>
<div id="content-sec-4">...</div>

 ما می توانیم با استفاده از سلکتور زیر، تمام عناصر <div>  را انتخاب کنیم:

jQuery('div[id^="content-sec-"]');

 {module کمک نقدی به نویسنده}