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

מאמר המשך המספר על שינויים נוספים שאפשר לעשות ב-HTML של מסמך באמצעות jQuery.

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

wrap – עטיפה

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

פסקת דוגמא

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


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

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

wrapAll – עטיפת הכל

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

פסקת דוגמא

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

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

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

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


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

wrapInner – עטוף בפנים

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

פסקת דוגמא


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

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

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

פסקת דוגמא בתוך div צהוב

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


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

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

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

פסקת דוגמא

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


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

replaceAll

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

פסקת דוגמא

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


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

מחיקת התוכן empty

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

פסקת דוגמא

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


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

remove\ detach

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

פסקת דוגמא


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

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

clone

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

פסקת דוגמא

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

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


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

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

פוסטים נוספים שכדאי לקרוא

גלילה לראש העמוד