each, is, hasClass, filter

בפוסט הזה נדבר על 4 פונקציות חשובות נוספות. הפונקציות each וjQuery.each שהינן פונקציות של לולאה (דומה קצת לforeach של שפת PHP למי שמכיר), הפונקציות is, hasClass שהן פונקציות של שאלה, והפונקציה filter – פונקצית סינון של jQuery, שמאפשרת לנו לסנן את סט האלמנטים שלנו באופנים מורכבים שונים.

jQuery.each()

הפונקציה משמשת כלולאת foreach, למעבר על מערך או אובייקט. היא עוברת תא אחרי תא במערך (או משתנה אחר משתנה באובייקט), ועוברת על הערכים בתא הספציפי שבו היא אוחזת כעת. כך שבשונה מלולאת for – אין צורך לגשת בכל סיבוב של הלולאה למערך/אובייקט, למקום i, אלא הפונקציה עושה את זה לבד.

התחביר:

jQuery.each(element, function(index, value){
    // your code here
});

כשעוברים על מערך – index מכיל את המקום במערך שעליו עוברים כעת, וכשעוברים על אובייקט – index מכיל את הkey של התא הספציפי שעליו עוברים כעת.

דוגמאות קוד:

.each()

פונקציה נוספת שמתנהגת כלולאת foreach, אלא שהיא עוברת על סט אלמנטים מהDOM, מה שקראנו בפרקים הקודמים "האלמנטים הפעילים".

בשונה מהפונקציה הקודמת שלא עוברת על משתנים מסוג jQuery, ולכן צריך לתת את השם של הספריה לפני הפונקציה jQuery.each() – הפונקציה הזו נכתבת כשימוש שנעשה בסט אלמנטים של jQuery, ולכן אין צורך להגדיר את שם הספריה לפניה.

התחביר:

jQuery(selectors).each(function(index, element){
    // Your code here
});

בתוך הלולאה, כשנרצה לגשת לאלמנט הספציפי שבו אוחזים מתוך סט האלמנטים – ניתן לגשת באמצעות קריאה לjQuery(this) או דרך המשתנה element שמתקבל בפונקציה.

דוגמאות קוד:

.is()

הפונקציה מחזירה true או false, ועובדת במספר דרכים, בהתאם לסוג הערך שבסוגריים:

אפשרות ראשונה

הערך שבסוגריים הוא סלקטור, והפונקציה מחזירה האם האלמנט הפעיל תואם לסלקטור שבסוגריים.
דוגמאות:

if(jQuery(this).is('li'))

בודק עם האלמנט שבו אני עכשיו הוא li

if(jQuery('#textCheckbox').is(':checked'))

// בודק האם הצ'קבוקס שנקרא textCheckbox מסומן כעת.

if(jQuery(this).is('#parent > .child'))

בודק אם האלמנט שבו אני נמצאת הוא בן ישיר של אלמנט בשם parent, וכן אם יש לאלמנט שלי גם את הקלאס child

בבדיקה זו, במידה ויש לנו סט אלמנטים פעילים ולא רק אלמנט אחד – הפונקציה is() תחזיר לנו true גם אם רק חלק מהאלמנטים תואמים לקריטריון שבסוגריים.

אפשרות שניה

הערך שבסוגריים הוא פונקציה שמחזירה true או false, וזה מה שהis() עצמו יחזיר.

גם באפשרות הזו, כמו בקודמת, בסט אלמנטים – תחזור תשובה חיובית גם אם רק חלק מהאלמנטים הפעילים עונים לקריטריון.

אפשרות שלישית

בדיקה האם האלמנט הפעיל נמצא בתוך סט אלמנטים פעילים.

את האפשרות הזו ניתן לכתוב בשתי הצורות –

if(jQuery('.elementSet').is(jQuery(.elementToCheck'));
if(jQuery('.elementToCheck').is(jQuery('.elementSet'));

דוגמאות קוד:

אפשרויות הראשונה והשניה:

האפשרות השלישית:

מובן שהדוגמאות הללו פשוטות מאד. הן נועדו כדי לפשט את הפונקציות והשימוש בהן, ולא לתת השראה…

.hasClass()

פונקציה פשוטה למדי. היא בודקת אם לאלמנט הפעיל יש את הקלאס שבסוגריים, ומחזירה true או false בהתאם ל. השימוש בה נעשה בעיקר בשאלות if.

התחביר:

נניח שיש לנו div שקיבל את ההגדרות: id="myID" class="foo"

jQuery('#myID').hasClass('foo'); // יחזיר true
jQuery('#myID').hasClass('bar'); // יחזיר false

.filter()

הפונקציה המקסימה הזו לוקחת סט אלמנטים פעילים, ומעבירה אותם עוד סינון. היא מיועדת למקומות שנצטרך לסט אלמנטים סינון שלא קיים בjQuery. בגלל שהיא מחזירה סט אלמנטים – נוכל להמשיך הלאה להתקדם עם שורת הסקריפט ולבצע על אותם אלמנטים שחזרו מfilter את אותן מניפולציות שניתן לבצע על כל סט אלמנטים אחר.

בהרבה מאד מקרים הפונקציה פילטר תחסוך לנו שימוש בלולאת each. העבודה איתה כמעט זהה לעבודה עם הפונקציה is שראינו קודם. היא מקבלת בסוגריים כמעט את אותן אפשרויות כמו הפונקציה is. ההבדלים ביניהן

• הפונקציה is() מחזירה true/false במידה וסט האלמנטים עונה true על השאלה. לעומתה הפונקציה filter מחזירה מתוך סט האלמנטים את אלה שענו true על השאלה.
• בפונקציה is ניתן לשאול על סט אלמנטים האם האלמט הפעיל נמצא שם (הצורה הרביעית לכתיבה). בפונקציה פילטר לא ניתן לשאול כך, מאחר ואנחנו עוסקים באלמנט פעיל בכל מקרה. במקום זאת ישנה אפשרות לסנן אלמנט פעיל שנמצא בתוך סט אלמנטים פעילים של jQuery או סתם של JS (שמתקבלים לנו בפונקציה כמו getElementById).

דוגמאות קוד:

 

עד כאן המדריך שלנו על ספרית jQuery. מקווה שאהבתם והחכמתם.

כרגיל, אם משהו לא ברור – תוכלו לכתוב לי בטופס התגובה, או במפורט בעמוד צור קשר, ואשתדל לענות לכל שאלה.