چرا تابع .not() جی کوئری jQuery هیچ تاثیری نداره؟

کد من رو ببینید:

# HTML
<p>There are some texts</p>
<div class="specific_element">
  sth
</div>
<p>whatever</p>

# CSS
body{
  border: 1px solid;
}
.specific_element{
  border: 1px solid red;
}

# JavaScript/jQuery
$('body').not('.specific_element').css('opacity','.3');

این هم نمونه آنلاینش :

اگه کدم رو ببنید متوجه می‌شید که من می خوام تمام بادی body رو کم رنگ کنم یعنی شفافیتش opacity رو کم کنم بجز یک المنت element خاصی که مد نظرمه. یعنی می خوام فقط المنتی که این کلاس رو داره specific_element کمرنگ نشه. چی کار باید بکنم؟ فرقی هم نمی کنه که با وانیلا جاوااسکریپت یا با جی کوئری. ممنون میشم کمکم کنید

تابع not برای حذف المنت های مشخصی از یک ست المنت هست. برای مثال:

$('a').not('.active')

کد بالا همه ی تگ های a رو انتخاب میکنه و المنتی که کلاس active داره رو حذف میکنه

توی مثال شما ابتدا body رو انتخاب کردید. پس ست المنت های شما فقط شامل یک المنت body است.

حالا وقتی .not(.specific_element) را اعمال میکنید سعی میکنه این المنت رو از توی ست حذف کنه. چون این المنت توی ست موجود نیست عملا هیچ اتفاقی نمیافته

در واقع کدی که شما نوشتید برابر است با

$('body').css('opacity','.3');

و وقتی شما opacity یک المنت پدر را تغییر میدهید همه ی فرزندان نیز محو میشوند. برای همین باعث میشه که .specific_element نیز محو شود.

راه حل مشکل شما به این صورت میتونه باشه

$('body *').not('.specific_element').css('opacity', '.3')

نمونه آنلاین

بجای اینکه .not() رو مستقیم روی body بزنی، اونو روی بچه هاش بزن. به این شکل:

$('body').children().not('.specific_element').css('opacity','.3');

یگ نکته جالبی که من توی این سوال و جواب ها یاد گرفتم این بود که * یعنی «همه چیز» در برنامه نویسی (حداقل در جی کوئری jQuery سلکتور). پس میتونم از همین نکته استفاده کنیم (همونطور که آقای Skill هم گفتند) و به این شکل هم پیادش میشه کرد:

$('*:not(*[class*="specific_element"])').css('opacity','.3');

سلکتور (یا همون انتخاب کننده المنت در دام) بالا یعنی:

همه چیز بجز اون المنت مورد نظر