jQuery تدوير - طريقة is()

دليل التدوير لـ jQuery

مثال

يعود بالصح، لأن عنصر الأب هو عنصر p:

  var isFormParent = $("input[type='checkbox']").parent();.is("form");
  $("div").text("isFormParent = " + isFormParent);

تجربة بنفسك

تعريف والاستخدام

يستخدم is() للتحقق من مجموعة العناصر التي تتطابق مع الخيار أو العنصر أو jQuery object، إذا كان هناك عنصر واحد على الأقل يتطابق مع المعامل المحدد، فإنه يعود بالصح

النحو

.is(selector)
المواصفات وصف
selector قيمة سلسلة تحتوي على تعبير اختيار لمجموعة العناصر التي تتطابق معها.

شرح مفصل

مختلفة عن طرق التصفية الأخرى، لا تقوم .is() بإنشاء jQuery object جديد. بدلاً من ذلك، يسمح لنا بفحص jQuery object دون تعديل محتواه. هذا مفيد عادةً داخل callback، مثل معالج الحدث.

افترض أن لدينا قائمة تحتوي على مشروعين يحتويان على عناصر فرعية:

<ul>
  <li>list <strong>item 1</strong></li>
  <li><span>list item 2</span></li>
  <li>نقطة قائمة 3</li>
</ul>

يمكنك إضافة معالج "click" إلى عنصر <ul>، ثم تحديد الكود ليعمل فقط عندما يتم ضرب العنصر نفسه وليس عنصر الفرع، عندئذ يتم التفعيل:

$("ul").click(function(event) {
  var $target = $(event.target);
  if ( $target.is("li") ) {
    $target.css("background-color", "red");
  }
);

تجربة بنفسك

الآن، عندما يضغط المستخدم على كلمة "list" في العنصر الأول من القائمة أو على أي كلمة في العنصر الثالث من القائمة، يتم تعيين العنصر المضغط على خلفية أحمر. ومع ذلك، عندما يضغط المستخدم على كلمة "item 1" في العنصر الأول أو على أي كلمة في العنصر الثاني، لا يحدث أي تغيير، لأن الهدف من الحالة السابقة هو <strong> هو <span>.

يرجى ملاحظة أن للعناصر المحددة بمبدأ الموقع، مثل :first،:gt() أو :even، التصفية المحددة هي للعناصر المحددة من خلال jQuery، وليس للوثيقة. لذا، فإن التعبير مثل $("li:first").is("li:last") يعود بالصحية، ولكن $("li:first-child").is("li:last-child") يعود بالخطأ.

استخدام الدالة

استخدام الدالة، الطريقة الثانية لهذه الدالة هي حساب التعبيرات المرتبطة بالعناصر بناءً على الدالة وليس بناءً على المبدأ. بالنسبة لكل عنصر، إذا عادت الدالة بالصحية، فإن .is() تعود بالصحية أيضًا. على سبيل المثال، هذا هو جزء من HTML المعقد بعض الشيء:

<ul>
  <li><strong>نقطة</strong> قائمة 1 - علامة قوية واحدة</li>
  <li><strong>نقطة</strong> قائمة <strong>2</strong> -
    اثنان <span>عناصر قوية</span></li>
  <li>نقطة قائمة 3</li>
  <li>نقطة قائمة 4</li>
  <li>نقطة قائمة 5</li>
</ul>

يمكنك إضافة معالج النقر على كل <li> لتحسب عدد العناصر <strong> الموجودة داخل <li> المُنقر عليه:

$("li").click(function() {
  var $li = $(this),
    isWithTwo = $li.is(function() {
      return $('strong', this).length === 2;
    };
  if ( isWithTwo ) {
    $li.css("background-color", "green");
  } else {
    $li.css("background-color", "red");
  }
);

تجربة بنفسك

دليل التدوير لـ jQuery