jQuery – שינויים ב-HTML חלק ב'

אחרי שלמדנו לבצע שינויים בסיסיים ב-HTML באמצעות jQuery, הגיע הזמן למניפולציות קצת יותר מתקדמות.

wrap – עטיפה

עד כה כל הדוגמאות היו מניפולציות בתוך האלמנט (הוספת אלמנט, טקסט או HTML בתוך אלמנט שבחרנו עם הסלקטור) או מניפולציות לצד הטקסט (הוספת אלמנט, טקסט או HTML לפני או אחרי האלמנט) אך באמצעות wrap אנו יכולים להוסיף אלמנט שיעטוף את האלמנט שאנו רוצים. למשל בוא ונניח שיש לי פסקה חביבה שאני רוצה להקיף אותה ב-div בעל רקע אדום:

פסקת דוגמא

Do the Action

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

$(document).ready(function() {
$("#myButton1").click(function () {
$("#example1").wrap("<div style='background-color:red'></div>");
})
;});

אפשר להשתמש ב-HTML או ממש באלמנט כמו למשל: document.createElement("div").

wrapAll – עטיפת הכל

נניח שיש לי כמה פסקאות או כמה אלמנטים ואני רוצה לעטוף את כולם באלמנט על אחד? כאן אני אשתמש בפקודת wrapAll שגם היא פשוטה למדי.

פסקת דוגמא

פסקת דוגמא נוספת

פסקת דוגמא שלישית

פסקת דוגמא רביעית

Do the Action

וככה זה נראה, פשוט ביותר.

$("#myButton2").click(function () {
$(".example2").wrapAll("<div style='background-color:red'></div>");
})

wrapInner – עטוף בפנים

אם יש לי תוכן (אלמנטים או טקסט) בתוך האלמנט שלי, אני יכול לעטוף רק אותם. כך למשל, אם יש לי טקסט בתוך הפסקה שלי, אני יכול לעטוף אותו בתגית strong או b.

פסקת דוגמא

Do the Action

$("#myButton3").click(function () {
$(".example3").wrapInner("<strong></strong>");
})

למחוק את העוטף – unWrap

פונקצית unwrap היא בדיוק ההופכית לפונקצית wrap. היא מסירה באופן אלגנטי את אלמנט האב.

Do the Action

עם הסלקטור אנו בוחרים את הפסקה ופונקצית unwrap דואגת להסיר את האבא – הדיב הצהוב.

$("#myButton13").click(function () {
$("#example13").unwrap();
})

החלפת אלמנטים – replaceWith

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

פסקת דוגמא

Do the Action

וככה עושים את זה, פשוט וקל. אפשר להחליף באיזה אלמנט שרוצים.

$("#myButton4").click(function () {
$(".example4").replaceWith("<p>החלפתי את התוכן!</p>");
})

replaceAll

replaceAll זהה כמעט לחלוטין ל-replaceWith רק שסדר הפרמטרים שלה הפוך והיא מחזירה את האלמנטים שהוחלפו (שזה שימושי באפליקציות מסוימות). ככה זה עובד:

פסקת דוגמא

Do the Action

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

$("#myButton5").click(function () {
$("<p>Test success!</p>").replaceAll(".example5");
})

מחיקת התוכן empty

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

פסקת דוגמא

Do the Action

וככה עושים את זה, קל ופשוט.

$("#myButton6").click(function () {
$(".example6").empty();
})

remove\ detach

remove זהה כמעט לחלוטין ל-empty. אבל היא באמת משמידה את האלמנט בלי להותיר לו זכר. במקרה שלנו היא פשוט תמחק את הפסקה ומי שמשתמש ב-firebug יוכל לראות שהיא ממש לא קיימת.

פסקת דוגמא

Do the Action

$("#myButton7").click(function () {
$(".example7").remove();
})

אם אתם רוצים למחוק את האלמנט אך להשתמש בו בעתיד לשימושים שונים (אפילו רק כדי לקחת ממנו מידע) אפשר במקום remove להשתמש בפונקצית detach(). רק לא לשכוח לשמור רפרנס לאלמנט.

clone

clone היא קצת יותר מורכבת להבנה. הפקודה הזו מבצעת העתקה של האלמנט שאותו נוכל להדביק בכל מקום אחר באמצעות האמצעים שאותם אנו כבר מכירים (כמו append או prepend שעליהם למדנו במאמר הקודם). בדוגמא שלנו אנו נעתיק את פסקת הדוגמא ונדביק אותה באמצעות append מיד אחרי פסקת הדוגמא הנוספת בלחיצה על הכפתור.

פסקת דוגמא

פסקת דוגמא נוספת שפסקת הדוגמא תודבק אליה.

Do the Action

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

$("#myButton8").click(function () {
var clonedElement = $(".example8").clone();
$("#example9").after(clonedElement);
})

המאמר הבא מלמד על איך לעשות שינויים עיצוביים באמצעות מניפולציה של ה-CSS.