التابع .is() في jQuery
.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> </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>