الفرق بين المراجعتين لصفحة: «jQuery/is»

مراجعة 09:38، 23 يونيو 2018

`‎.is( selector )‎`

القيمة المعادة

يُعيد كائنًا من النوع Boolean.

الوصف

التحقق من مجموعة العناصر المطابقة الحالية مقابل مُحدَّد أو عنصر أو كائن jQuery وإعادة القيمة true إذا تطابق أحد هذه العناصر على الأقل مع الوسائط المُدخلَة.

`‎.is( selector )‎`

أُضيف مع الإصدار: 1.0.

`selector`

سلسلة من النوع Selector تحتوي على تعبير مُحدِّد لمطابقة العناصر.

`‎.is( function )‎`

أُضيف مع الإصدار: 1.6.

`function`

دالة على الشكل Function( Integer index, Element element ) => Boolean، وهي تستخدم كاختبار لكل عنصر في المجموعة. وهي تقبل وسيطَين، index وهو فهرس العنصر في مجموعة jQuery والوسيط element وهو عنصر DOM. ويشير المعامل this داخل الدالة إلى عنصر DOM الحالي.

`‎.is( selection )‎`

أُضيف مع الإصدار: 1.6.

`selection`

كائن jQuery موجود لمطابقة المجموعة الحالية من العناصر.

`‎.is( elements )‎`

أُضيف مع الإصدار: 1.6

`elements`

عنصر واحد أو أكثر لمطابقة المجموعة الحالية من العناصر مقابله، وهو من النوع Element.

بخلاف توابع الترشيح الأخرى، لا ينشئ التابع ‎.is()‎ كائن jQuery جديد. وعوضًا عن ذلك، يتيح لك اختبار محتويات كائن jQuery بدون تعديل. وهو أمر مفيد في كثير من الأحيان داخل عمليات الاستدعاء، مثلما في حالة معالجات الأحداث.

افترض أن لديك قائمة <ul> تحتوي على عنصرين يحتويان على عنصرٍ ابن:

<ul>
  <li>البند <strong>رقم 1</strong></li>
  <li><span>البند رقم 2</span></li>
  <li>البند رقم 3</li>
</ul>

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

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

الآن، عند نقر المستخدم على الكلمة "list" في العنصر الأول أو في أي مكان في العنصر الثالث، سيتغير لون خلفية عنصر القائمة الذي نُقِر عليه إلى الأحمر. ومع ذلك، فعندما ينقر المستخدم على العنصر 1 في العنصر الأول أو في أي مكان آخر في العنصر الثاني، لن يحدث أي شيء، لأنه في هذه الحالات يكون هدف الحدث هو العنصر <strong> أو <span>، على التوالي.

قبل الإصدار jQuery 1.7، في سلاسل المُحدَّد التي تحتوي على محددات موضعية مثل ‎:first أو ‎:gt()‎ أو ‎:even، يجرى الترشيح الموضعي مقابل كائن jQuery المُمرَر إلى ‎.is()‎، وليس مقابل المستند الذي يحتوي عليه. لذا فبالنسبة إلى مقطع HTML الموضح أعلاه، فإن تعبيرًا مثل ‎$( "li:first" ).is( "li:last" )‎ يُعيد القيمة true، ولكن ‎$( "li:first-child" ).is( "li:last-child" )‎ يُعيد القيمة false . بالإضافة إلى ذلك، منع خطأ في مكتبة المُحدِّد Sizzle العديد من محدَّدات المواقع من العمل بشكل صحيح. جعل هذان العاملان محددات المواقع غير قابلة للاستخدام تقريبًا في المُرشَّحات.

بدءًا من jQuery 1.7، تستخدم سلاسلُ المحدد محددات المواقع بتطبيق المحدد على المستند، ثم تحديد ما إذا كان العنصر الأول من مجموعة jQuery الحالية يطابق أيًا من العناصر الناتجة. لذا بالنسبة إلى مقطع HTML الموضح أعلاه، فإن تعبيرًا مثل ‎$( "li:first" ).is( "li:last" )‎ يُعيد false . لاحظ أنه نظرًا لأن محددات المواقع هي إضافات jQuery وليست من معايير W3C، فإننا نوصي باستخدام محددات W3C كلما أمكن ذلك.

استخدام دالة

يقيّم الشكل الثاني من التابع التعبيرات المتعلقة بالعناصر القائمة على دالة بدلاً من محدد. لكل عنصر، إذا أعادت الدالة القيمة true، يُعيد التابع ‎.is()‎ القيمة true كذلك. على سبيل المثال، إليك شيفرة HTML الآتية:

<ul>
  <li><strong>العنصر</strong> رقم 1 - وسم strong واحد</li>
  <li><strong>العنصر</strong> رقم <strong>2</strong> -
    اثنين <span>strong وسم</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" );
  }
});

أمثلة

عرض بضع طرائق يمكن توظيفها لاستخدام التابع ‎.is()‎‎ داخل معالج الحدث:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>is مثال على التابع</title>
  <style>
  div {
    width: 60px;
    height: 60px;
    margin: 5px;
    float: left;
    border: 4px outset;
    background: green;
    text-align: center;
    font-weight: bolder;
    cursor: pointer;
  }
  .blue {
    background: blue;
  }
  .red {
    background: red;
  }
  span {
    color: white;
    font-size: 16px;
  }
  p {
    color: red;
    font-weight: bolder;
    background: yellow;
    margin: 3px;
    clear: left;
    display: none;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div></div>
<div class="blue"></div>
<div></div>
<div class="red"></div>
<div><br/><span>أحمد</span></div>
<div class="blue"></div>
<p>&nbsp;</p>
 
<script>
$( "div" ).one( "click", function() {
  if ( $( this ).is( ":first-child" ) ) {
    $( "p" ).text( "إنه أول مقطع div." );
  } else if ( $( this ).is( ".blue,.red" ) ) {
    $( "p" ).text( "إنه قسم أزرق وأحمر." );
  } else if ( $( this ).is( ":contains('أحمد')" ) ) {
    $( "p" ).text( "إنه أحمد!" );
  } else {
    $( "p" ).html( "ليس شيئًا <em>خاصًا</em>." );
  }
  $( "p" ).hide().slideDown( "slow" );
  $( this ).css({
    "border-style": "inset",
    cursor: "default"
  });
});
</script>
 
</body>
</html>

إعادة true، لأن العنصر الأب للعنصر <input> هو العنصر <form>:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>is مثال على التابع</title>
  <style>
  div {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<form>
  <input type="checkbox">
</form>
<div></div>
 
<script>
var isFormParent = $( "input[type='checkbox']" ).parent().is( "form" );
$( "div" ).text( "هل عنصر النموذج الأب = " + isFormParent );
</script>
 
</body>
</html>

إعادة false، لأن العنصر الأب للعنصر <input> هو العنصر <p>:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>is مثال على التابع</title>
  <style>
  div {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<form>
  <p><input type="checkbox"></p>
</form>
<div></div>
 
<script>
var isFormParent = $( "input[type='checkbox']" ).parent().is( "form" );
$( "div" ).text( "هل عنصر النموذج الأب = " + isFormParent );
</script>
 
</body>
</html>

التحقق من مجموعة موجودة من عناصر القائمة البديلة. تنزلق عناصر القائمة البديلة الزرقاء إلى أعلى في حين يتحول لون الآخرين إلى اللون الأحمر:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>is مثال على التابع</title>
  <style>
  li {
    cursor: pointer;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<ul id="browsers">
  <li>Chrome</li>
  <li>Safari</li>
  <li>Firefox</li>
  <li>Opera</li>
</ul>
 
<script>
var alt = $( "#browsers li:nth-child(2n)" ).css( "background", "#0ff" );
$( "li" ).click(function() {
  var li = $( this );
  if ( li.is( alt ) ) {
    li.slideUp();
  } else {
    li.css( "background", "red" );
  }
});
</script>
 
</body>
</html>

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

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>is مثال على التابع</title>
  <style>
  li {
    cursor: pointer;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<ul id="browsers">
  <li>Chrome</li>
  <li>Safari</li>
  <li>Firefox</li>
  <li>Opera</li>
</ul>
 
<script>
var alt = $( "#browsers li:nth-child(2n)" ).css( "background", "#0ff" );
$( "li" ).click(function() {
  if ( alt.is( this ) ) {
    $( this ).slideUp();
  } else {
    $( this ).css( "background", "red" );
  }
});
</script>
 
</body>
</html>

مصادر

صفحة التابع ‎ ‎.is()‎‎‎‎‎‎‎‎في توثيق jQuery الرسمي.

@@ سطر 18: / سطر 18: @@
 ==== <code>function</code> ====
-دالة على الشكل [[JavaScript/Function|Function]]( [[JavaScript/Number|Integer]] index, [[JavaScript/Element|Element]] element )  =>  [[JavaScript/Boolean|Boolean]]، وهي تستخدم كاختبار لكل عنصر في المجموعة. وهي تقبل الوسيطَين، index وهو فهرس العنصر في مجموعة jQuery والوسيط element وهو عنصر DOM. ويشير العنصر this داخل الدالة إلي عنصر DOM الحالي.
+دالة على الشكل <code>[[JavaScript/Function|Function]]( [[JavaScript/Number|Integer]] index, [[JavaScript/Element|Element]] element )  =>  [[JavaScript/Boolean|Boolean]]</code>، وهي تستخدم كاختبار لكل عنصر في المجموعة. وهي تقبل وسيطَين، <code>index</code> وهو فهرس العنصر في مجموعة jQuery والوسيط <code>element</code> وهو عنصر DOM. ويشير المعامل <code>[[JavaScript/this|this]]</code> داخل الدالة إلى عنصر DOM الحالي.
 === <code>‎.is( selection )‎</code> ===
@@ سطر 30: / سطر 30: @@
 ==== <code>elements</code> ====
-عنصر واحد أو أكثر لمطابقة المجموعة الحالية من العناصر مقابله، وهو من النوع [[JavaScript/Element|Element]].
+عنصر واحد أو أكثر لمطابقة المجموعة الحالية من العناصر مقابله، وهو من النوع [[JavaScript/Element|<code>Element</code>]].
 بخلاف توابع الترشيح الأخرى، لا ينشئ التابع <code>‎.is()</code>‎ كائن jQuery جديد. وعوضًا عن ذلك، يتيح لك اختبار محتويات كائن jQuery بدون تعديل. وهو أمر مفيد في كثير من الأحيان داخل عمليات الاستدعاء، مثلما في حالة معالجات الأحداث.
@@ سطر 40: / سطر 40: @@
    <li>البند رقم 3</li>
 </ul>
-</syntaxhighlight>يمكنك إرفاق معالج النقر بالعنصر <code>[[HTML/ul|<nowiki><ul></nowiki>]]</code>، ثم حصر تنفيذ الشيفرة للعمل فقط عند النقر فوق عنصر القائمة نفسه، وليس أحد أبناءه:<syntaxhighlight lang="jquery">
+</syntaxhighlight>يمكنك إرفاق معالج النقر بالعنصر <code>[[HTML/ul|<nowiki><ul></nowiki>]]</code>، ثم حصر تنفيذ الشيفرة للعمل فقط عند النقر فوق عنصر القائمة نفسه، وليس أحد أبنائه:<syntaxhighlight lang="jquery">
 $( "ul" ).click(function( event ) {
    var target = $( event.target );
@@ سطر 51: / سطر 51: @@
 قبل الإصدار jQuery [http://api.jquery.com/category/version/1.7 1.7]، في سلاسل المُحدَّد التي تحتوي على محددات موضعية مثل <code>[[jQuery/first selector|‎:first]]</code> أو <code>[[jQuery/gt selector|‎:gt()‎]]</code> أو <code>[[jQuery/even selector|‎:even]]</code>، يجرى الترشيح الموضعي مقابل كائن jQuery المُمرَر إلى ‎.<code>is()</code>‎، وليس مقابل المستند الذي يحتوي عليه. لذا فبالنسبة إلى مقطع HTML الموضح أعلاه، فإن تعبيرًا مثل <code>‎$( "li:first" ).is( "li:last" )‎</code> يُعيد القيمة <code>true</code>، ولكن <code>‎$( "li:first-child" ).is( "li:last-child" )‎</code> يُعيد القيمة <code>false</code> . بالإضافة إلى ذلك، منع خطأ في مكتبة المُحدِّد Sizzle العديد من محدَّدات المواقع من العمل بشكل صحيح. جعل هذان العاملان محددات المواقع غير قابلة للاستخدام تقريبًا في المُرشَّحات.
-بدءًا من jQuery 1.7، تستخدم سلاسلُ المحدد محددات المواقع بتطبيق المحدد على المستند، ثم تحديد ما إذا كان العنصر الأول من مجموعة jQuery الحالية يطابق أيًا من العناصر الناتجة. إذا، فبالنسبة إلى مقطع HTML الموضح أعلاه، فإن تعبيرًا مثل <code>‎$( "li:first" ).is( "li:last" )</code>‎ يُعيد <code>false</code> . لاحظ أنه نظرًا لأن محددات المواقع هي إضافات jQuery وليست من معايير W3C، فإننا نوصي باستخدام محددات W3C كلما أمكن ذلك.
+بدءًا من jQuery 1.7، تستخدم سلاسلُ المحدد محددات المواقع بتطبيق المحدد على المستند، ثم تحديد ما إذا كان العنصر الأول من مجموعة jQuery الحالية يطابق أيًا من العناصر الناتجة. لذا بالنسبة إلى مقطع HTML الموضح أعلاه، فإن تعبيرًا مثل <code>‎$( "li:first" ).is( "li:last" )</code>‎ يُعيد <code>false</code> . لاحظ أنه نظرًا لأن محددات المواقع هي إضافات jQuery وليست من معايير W3C، فإننا نوصي باستخدام محددات W3C كلما أمكن ذلك.
-=== باستخدام دالة ===
+=== استخدام دالة ===
-يقيّم الشكل الثاني من التابع التعبيرات المتعلقة بالعناصر القائمة على دالة بدلاً من محدد. لكل عنصر، إذا أعادت الدالة القيمة <code>true</code>، يُعيد التابع ‎<code>.is()</code>‎ القيمة <code>true</code> كذلك. على سبيل المثال، إليك هذا المقطع من HTML أكثر علاقة إلى حد ما:<syntaxhighlight lang="html">
+يقيّم الشكل الثاني من التابع التعبيرات المتعلقة بالعناصر القائمة على دالة بدلاً من محدد. لكل عنصر، إذا أعادت الدالة القيمة <code>true</code>، يُعيد التابع ‎<code>.is()</code>‎ القيمة <code>true</code> كذلك. على سبيل المثال، إليك شيفرة HTML الآتية:<syntaxhighlight lang="html">
 <ul>
    <li><strong>العنصر</strong> رقم 1 - وسم strong واحد</li>
@@ سطر 78: / سطر 78: @@
 === أمثلة ===
-عرض بضع طرق التابع <code>‎.is()</code>‎‎ التي يمكن استخدامها داخل معالج الحدث.<syntaxhighlight lang="html">
+عرض بضع طرائق يمكن توظيفها لاستخدام التابع <code>‎.is()</code>‎‎ داخل معالج الحدث:<syntaxhighlight lang="html">
 <!doctype html>
 <html lang="en">
@@ سطر 148: / سطر 148: @@
 </body>
 </html>
-</syntaxhighlight>إعادة <code>true</code>، لأن العنصر الأب للإدخال هو عنصر <code>[[HTML/form|<form>]]</code>.<syntaxhighlight lang="html">
+</syntaxhighlight>إعادة <code>true</code>، لأن العنصر الأب للعنصر <code>[[HTML/input|<input>]]</code> هو العنصر <code>[[HTML/form|<form>]]</code>:<syntaxhighlight lang="html">
 <!doctype html>
 <html lang="en">
@@ سطر 175: / سطر 175: @@
 </body>
 </html>
-</syntaxhighlight>إعادة <code>false</code>، لأن العنصر الأب للإدخال هو عنصر <code>[[HTML/p|<nowiki><p></nowiki>]]</code>.<syntaxhighlight lang="html">
+</syntaxhighlight>إعادة <code>false</code>، لأن العنصر الأب للعنصر <code>[[HTML/input|<input>]]</code> هو العنصر <code>[[HTML/p|<nowiki><p></nowiki>]]</code>:<syntaxhighlight lang="html">
 <!doctype html>
 <html lang="en">
@@ سطر 202: / سطر 202: @@
 </body>
 </html>
-</syntaxhighlight>التحقق من مجموعة موجودة من عناصر القائمة البديلة. تنزلق عناصر القائمة البديلة الزرقاء إلى أعلى في حين يتحول لون الآخرين إلى اللون الأحمر.<syntaxhighlight lang="html">
+</syntaxhighlight>التحقق من مجموعة موجودة من عناصر القائمة البديلة. تنزلق عناصر القائمة البديلة الزرقاء إلى أعلى في حين يتحول لون الآخرين إلى اللون الأحمر:<syntaxhighlight lang="html">
 <!doctype html>
 <html lang="en">
@@ سطر 276: / سطر 276: @@
 == مصادر ==
-[http://api.jquery.com/is/ صفحة التابع ‎ ‎.is()‎‎‎‎‎‎‎‎في توثيق jQuery الرسمي].
+* [http://api.jquery.com/is/ صفحة التابع ‎ ‎.is()‎‎‎‎‎‎‎‎في توثيق jQuery الرسمي].
 [[تصنيف:jQuery]]
 [[تصنيف:jQuery Method]]
 [[تصنيف:jQuery Traversing]]