jQuery Academy · درس

استبعاد العناصر باستخدام .not()

أتقن الأسلوب .not() لاستبعاد عناصر محددة بدقة من مجموعة العناصر المطابقة، وتنقيح تحديداتك ومنع العمليات غير المقصودة على عناصر معينة.

استبعاد العناصر باستخدام .not() درس مجاني في jQuery Academy على CoddyKit. هذا هو الدرس 3 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في jQuery Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة jQuery Academy 3 دروس في المجموع.

مقدمة إلى ‎.not()‎

مرحبًا! في هذا الدرس، ستتقن الطريقة القوية .not() في jQuery. فهي ضرورية لتحسين تحديدات العناصر.

تتيح لك الطريقة .not() استبعاد عناصر محددة من مجموعة من العناصر المتطابقة، مما يمنحك تحكمًا دقيقًا في العناصر التي تؤثر فيها عملياتك.

الاستبعاد باستخدام سلسلة محدد

الطريقة الأكثر شيوعًا لاستخدام .not() هي تمرير سلسلة محدد CSS إليها. عندئذٍ تزيل jQuery من التحديد الحالي أي عناصر تطابق هذا المحدد الجديد.

ابدأ بتحديد واسع.
ثم استخدم .not() لتصفية العناصر غير المرغوب فيها.

يفيد ذلك عندما يكون تحديد «كل شيء» أولًا ثم تحديد ما تريد «إزالته» أسهل.

.not() مع محدد صنف

جرّب هذا المثال. سنحدد جميع عناصر div، ثم نستخدم .not() لاستبعاد العناصر التي تحمل الصنف .special. وستُنسّق عناصر div غير الخاصة فقط.

<!DOCTYPE html>
<html>
<head>
<style>
  .red { color: red; }
</style>
</head>
<body>
  <div class="box">Item 1</div>
  <div class="box special">Item 2</div>
  <div class="box">Item 3</div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      // Select all .box divs, then exclude the one with .special
      $('.box').not('.special').addClass('red');
    });
  </script>
</body>
</html>

استبعاد عناصر محددة

إضافةً إلى سلسلة المحدد، يمكنك أيضًا تمرير عنصر DOM أو كائن jQuery مباشرةً إلى .not().

يفيد ذلك عندما يكون لديك بالفعل مرجع إلى العنصر (أو العناصر) المحدد الذي تريد استبعاده من التحديد الحالي.

.not() مع مرجع إلى عنصر

في هذا المثال، نحدد جميع عناصر القائمة (<li>). ثم نحدد عنصرًا معينًا باستخدام معرّفه (#item2) ونستخدم .not() لاستبعاده من عملية التنسيق.

<!DOCTYPE html>
<html>
<head>
<style>
  .bold { font-weight: bold; }
</style>
</head>
<body>
  <ul>
    <li>List Item 1</li>
    <li id="item2">List Item 2</li>
    <li>List Item 3</li>
  </ul>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      // Select all <li>, then exclude the specific #item2
      $('li').not($('#item2')).addClass('bold');
    });
  </script>
</body>
</html>

استبعاد مخصّص باستخدام دالة

لمنطق الاستبعاد الديناميكي أو المعقد بدرجة كبيرة، يمكنك تمرير دالة إلى .not().

تُشغَّل الدالة لكل عنصر في المجموعة الحالية.
إذا أعادت الدالة القيمة true، فسيُستبعد ذلك العنصر.
تشير this إلى عنصر DOM الحالي الذي تتم معالجته.

.not() مع مثال على دالة

نريد هنا تنسيق جميع الفقرات باستثناء الفقرات التي تحتوي على الكلمة 'exclude'. وتفحص الدالة المحتوى النصي لكل فقرة.

<!DOCTYPE html>
<html>
<head>
<style>
  .italic { font-style: italic; }
</style>
</head>
<body>
  <p>This is a normal paragraph.</p>
  <p>This paragraph contains 'exclude'.</p>
  <p>Another normal paragraph here.</p>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      $('p').not(function() {
        // Exclude paragraphs containing 'exclude'
        return $(this).text().includes('exclude');
      }).addClass('italic');
    });
  </script>
</body>
</html>

تسلسل ‎.not()‎ لتحقيق الدقة

يمكنك تسلسل عدة استدعاءات لـ .not()، أو دمج .not() مع طرق تصفية أخرى، لإنشاء تحديدات دقيقة للغاية.

يعمل كل استدعاء لـ .not() على تحسين مجموعة العناصر الحالية أكثر، إذ يزيل المزيد من العناصر تدريجيًا. فكّر في ذلك كإزالة طبقات العناصر التي لا تحتاج إليها.

متى تستخدم ‎.not()‎

تكون .not() مفيدة للغاية في الحالات التالية:

لديك تحديد أولي واسع وتريد إزالة أنواع محددة قليلة.
تحتاج إلى استبعاد عنصر لديك مرجع مباشر إليه مسبقًا.
يكون التعبير عن «الكل باستثناء هذه العناصر» أوضح وأسهل قراءة في شيفرتك.

إنها طريقة أنيقة لتضييق نطاق تركيزك دون كتابة محددات سالبة معقدة مسبقًا.

تحقق سريع: استخدام ‎.not()‎

تأمل HTML التالي. أي مقطع من شيفرة jQuery سيحدد بشكل صحيح جميع عناصر <p> باستثناء العنصر ذي المعرّف "intro"؟

<div>
  <p>Paragraph 1</p>
  <p id="intro">Introduction</p>
  <p>Paragraph 3</p>
</div>

مراجعة: إتقان ‎.not()‎

لقد أتقنت بنجاح الطريقة .not() في jQuery!

تعلّمنا أن .not() ضرورية لتحسين التحديدات من خلال استبعاد العناصر استنادًا إلى:

سلسلة محدد CSS (مثل .not('.hide'))
عنصر DOM محدد أو كائن jQuery (مثل .not(myElement))
دالة لمنطق استبعاد مخصّص وديناميكي.

واصل التدريب لجعل تحديدات jQuery أكثر دقة وكفاءة!

الأسئلة الشائعة

هل درس «استبعاد العناصر باستخدام .not()» مجاني؟

نعم — نص درس «استبعاد العناصر باستخدام .not()» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة jQuery Academy، انتقل إلى CoddyKit PRO. تتضمن دورة jQuery Academy 3 دروس في المجموع.

ماذا ستتعلم في «استبعاد العناصر باستخدام .not()»؟

أتقن الأسلوب .not() لاستبعاد عناصر محددة بدقة من مجموعة العناصر المطابقة، وتنقيح تحديداتك ومنع العمليات غير المقصودة على عناصر معينة. تتمرن على jQuery Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ jQuery Academy؟

لا تُشترط خبرة سابقة. jQuery Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 3.

كم من الوقت يستغرق درس «استبعاد العناصر باستخدام .not()»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس jQuery Academy هذا؟

نعم. كل درس في jQuery Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى jQuery Academy