קטגוריות: חציית jQuery > סינון
תיאור: בודק את הבחירה הנוכחית נגד סלקטור, אלמנט, או אובייקט jQuery, ומחזיר true, אם לפחות אחד מאלמנטים תואם לארגומנטים.
.is( selector )
הוספה בגרסה: 1.0
selector
מחרוזת מכילה ביטוי של סלקטור לבחירת אלמנטים.
.is( function(index) )
הוספה בגרסה: 1.6
function(index)
פונקציה המשמשת כטסט עבור קבוצה של אלמנטים. היא מקבלת ארגומנט אחת, שאינדקס שלו הוא האינדקס של אלמנט ברשימה jQuery. בתוך הפונקציה, הוא מתייחס לאלמנט DOM הנוכחי.
.is( jQuery object )
הוספה בגרסה: 1.6
jQuery object
אובייקט jQuery נוכחי כדי להתאים לרשימת אלמנטים.
.is( element )
הוספה בגרסה: 1.6
element
אלמנט כדי להתאים לרשימת אלמנטים.
בניגוד לשיטות סינון ועקיפה,
.is() לא מייצרת אובייקט חדש של jQuery.
במקום זה היא מאפשרת לנו לבדוק תוכן של אובייקט
jQuery ללא שינוי.
זה שימושי בקריאות חוזרות, כמו, למשל מטפלי אירועים.
נניח, שיש לנו רשימה, שני אלמנטים שלה מכילים אלמנטים ילד:
<ul> <li>list <strong>item 1</strong></li> <li><span>list item 2</span></li> <li>list item 3</li> </ul>
אנחנו יכולים לצרף מטפל אירוע לחיצה לאלמנט <ul>, ואחרי זה להגביל קוד לפעול רק כאשר אלמנט עצמו נלחץ, ולא אחד מהבנים שלו:
$('ul').click(function(event) {
if ($(event.target).is('li') ) {
$(event.target).css('background-color', 'red');
}
});
עכשיו, כאשר משתמש לוחץ על רשימת מילים בשורה ראשונה או איפה שהוא בשורה שלישית,
אלמנט רשימה שנלחץ יודגש עם רקע אדום.
אם זאת, אם משתמש לוחץ על
item 1
בשורה ראשונה או בכל מקום בשורה שניה,
שום דבר לא קורה,
מכיוון שבמקראים האלה מטרת אירוע היתה <strong> או <span>, בהתאם.שימוש בפונקציה
הצורה השניה של השיטה הזו מחשבת ביטויים הקשורים לאלמנטים, המבוסססים על פונקציה, ולא על סלקטור. עבור כל אלנמנט, אם פונקציה מחזירה true, גם .is() מחזירה true. לדוגמה, נמחיש קטע HTML יותר מורכב:
<ul>
<li><strong>list</strong> item 1 - one strong tag</li>
<li><strong>list</strong> item <strong>2</strong> -
two <span>strong tags</span></li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
דוגמאות
דוגמה 1
מספר דרכי שימוש של is() בתוך מטפל אירועים. $("div").one('click', function () {
if ($(this).is(":first-child")) {
$("p").text("It's the first div.");
} else if ($(this).is(".blue,.red")) {
$("p").text("It's a blue or red div.");
} else if ($(this).is(":contains('Peter')")) {
$("p").text("It's Peter!");
} else {
$("p").html("It's nothing <em>special</em>.");
}
$("p").hide().slideDown("slow");
$(this).css({"border-style": "inset", cursor:"default"});
});
דוגמה 1 - קוד מלא:
מספר דרכי שימוש שלis() בתוך מטפל אירועים.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("div").one('click', function () {
if ($(this).is(":first-child")) {
$("p").text("It's the first div.");
} else if ($(this).is(".blue,.red")) {
$("p").text("It's a blue or red div.");
} else if ($(this).is(":contains('Peter')")) {
$("p").text("It's Peter!");
} else {
$("p").html("It's nothing special.");
}
$("p").hide().slideDown("slow");
$(this).css({"border-style": "inset", cursor:"default"});
});
});
</script>
<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>
</head>
<body>
<div></div>
<div class="blue"></div>
<div></div>
<div class="red"></div>
<div><br/><span>Peter</span></div>
<div class="blue"></div>
<p> </p>
</body>
</html>
דוגמה 2
מחזיר true, מכיוון שהורה של השדה הוא אלמנט formדוגמה 2 - קוד מלא:
מחזיר true, מכיוון שהורה של השדה הוא אלמנט form.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
var isFormParent = $("input[type='checkbox']").parent().is("form")
$("div").text("isFormParent = " + isFormParent);
});
</script>
<style>div { color:red; }</style>
</head>
<body>
<form><input type="checkbox" /></form>
<div></div>
</body>
</html>
דוגמה 3
מחזיר false, בגלל שהורה של השדה input הוא אלמנט pדוגמה 3 - קוד מלא:
מחזיר false, בגלל שהורה של השדה input הוא אלמנטp.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
var isFormParent = $("input[type='checkbox']").parent().is("form")
$("div").text("isFormParent = " + isFormParent);
});
</script>
<style>div { color:red; }</style>
</head>
<body>
<form><p><input type="checkbox" /></p></form>
<div></div>
</body>
</html>
דוגמה 4
דרך חלופית להשיג את הדוגמה שלעיל באמצעות אלמנט ולא אובייקט jQuery. בדיקת אוסף הקיים של רשימת אלמנטים חלופית. כחולה, רשימה חלופית של אלמנטים נסגרת, בזמן שאחרים הופכים לאדומים<!DOCTYPE html>
<html>
<head>
<style>li { cursor:pointer; }</style>
<script src="http://code.jquery.com/jquery-latest.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", "#00FFFF");
$('li').click(function() {
var $li = $(this);
if ( $li.is( $alt ) ) {
$li.slideUp();
} else {
$li.css("background", "red");
}
});
</script>
</body>
</html>דוגמה 5
דרך חלופית להשיג את הדוגמה שלעיל באמצעות אלמנט ולא אובייקט jQuery. בדיקת אוסף הקיים של רשימת אלמנטים חלופית. כחולה, רשימה חלופית של אלמנטים נסגרת, בזמן שאחרים הופכים לאדומים<!DOCTYPE html>
<html>
<head>
<style>li { cursor:pointer; }</style>
<script src="http://code.jquery.com/jquery-latest.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", "#00FFFF");
$('li').click(function() {
if ( $alt.is( this ) ) {
$(this).slideUp();
} else {
$(this).css("background", "red");
}
});
</script>
</body>
</html>האם מידע זה היה מועיל?
