.wrap( wrappingElement )
מחזירה: jQuery
תיאור: עוטף מבנה HTML מסביב לכל אלמנט ברשימה של אלמנטים בהתאמה.
.wrap( wrappingElement )
הוספה בגרסה: 1.0
קטע HTML,
ביטוי בחירה, אובייקט
jQuery,
או אלמנט
DOM
המציין מבנה עבור עטיפה מסביב לאלמנטים בהתאמה.
.wrap( wrappingFunction )
הוספה בגרסה: 1.4
wrappingFunction
פונקציה של קריאה חוזרת, שיוצרת מבנה כדי לעטוף אלמנטים בהתאמה.
פונקציה .wrap() יכולה לקבל כל מחרוזת או אובייקט, שיכולים להיות נשלחים לתוך מיפעל הפונקציות
$()
כדי להגדיר מבנה
DOM.
מבנה הזה יכול להיות מקונן במספר רמות עומק, אבל הוא צריך להכיל רק אלמנט אחרון פנימיי אחד.
מבנה עוטף כל אלמנט מרשימת אלמנטים בהתאמה.
שיטה הזו מחזירה סט אלמנטים מקורי כדי לבנות שרשרת של יעדים.
נבחן HTML הבא:
<div class="container"> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div>
באמצעות .wrap(),
אנחנו יכולים להכניס מבנה
HTML
מסביב לאלמנט <div class="inner">, כמו:
$('.inner').wrap('<div class="new" />');
אלמנט <div class="new">
מיוצר בלטוס ומתווסף ל-
DOM.
כתוצאה
<div class="new">
עוטף מסביב כל אלמנט בהתאמה:
<div class="container">
<div class="new">
<div class="inner">Hello</div>
</div>
<div class="new">
<div class="inner">Goodbye</div>
</div>
</div>
גירסה שניה של שיטה הזו מאפשרת לנו להגדיר פונקציה של קריאה חוזרת. פונקציה של קריאה חוזרת תופעל רק פעם אחת עבור כל אלמנט בהתאמה; היא צריכה להחזיר אלמנט DOM, אובייקט jQuery או קטע של HTML, שבו יועטף אלמנט בהתאמה. לדוגמה:
$('.inner').wrap(function() {
return '<div class="' + $(this).text() + '" />';
});
זה יגרום לכך ש לכל
<div>
תהיה מחלקה, התואמת לטקסט העוטף:
<div class="container">
<div class="Hello">
<div class="inner">Hello</div>
</div>
<div class="Goodbye">
<div class="inner">Goodbye</div>
</div>
</div>
דוגמאות
דוגמה 1
עוטף div חדש מסביב לכל הפסקאות.$("p").wrap("<div></div>");
דוגמה 1 - קוד מלא:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("p").wrap("<div></div>"); }); </script> <style> div { border: 2px solid blue; } p { background:yellow; margin:4px; } </style> </head> <body> <p>Hello</p> <p>cruel</p> <p>World</p> </body> </html>
דוגמה 2
מכניס כל אלמנטים span לתוך עץ אובייקטים. שימו לב, כל אלמנט שנמצא מחוץ ל- span נשאר ללא שינוי, לדוגמה, טקסט אדום באובייקט <strong> בדוגמה. אפילו רווחים בין ה- spans נשארו. תלחצו על View Source כדי לראות קוד html חדש .$("span").wrap("<div><div><p><em><b></b></em></p></div></div>");
דוגמה 2 - קוד מלא:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("span").wrap("<div><div><p><em><b></b></em></p></div></div>"); }); </script> <style> div { border:2px blue solid; margin:2px; padding:2px; } p { background:yellow; margin:2px; padding:2px; } strong { color:red; } </style> </head> <body> <span>Span Text</span> <strong>What about me?</strong> <span>Another One</span> </body> </html>
דוגמה 3
עוטף כל הפסקאות בדף עם אלמנט div חדש.$("p").wrap(document.createElement("div"));
דוגמה 3 - קוד מלא:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("p").wrap(document.createElement("div")); }); </script> <style> div { border: 2px solid blue; } p { background:yellow; margin:4px; } </style> </head> <body> <p>Hello</p> <p>cruel</p> <p>World</p> </body> </html>
דוגמה 4
עוטף כל הפסקאות בדף באובייקט jQuery - אובייקט div כפול. שימו לב, זה לא מזיז אובייקט אלא משכפל אותו כדי לעטוף מסביב לאובייקט.$("p").wrap($(".doublediv"));
דוגמה 4 - קוד מלא:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("p").wrap($(".doublediv")); }); </script> <style> div { border: 2px solid blue; margin:2px; padding:2px; } .doublediv { border-color:red; } p { background:yellow; margin:4px; font-size:14px; } </style> </head> <body> <p>Hello</p> <p>cruel</p> <p>World</p> <div class="doublediv"><div></div></div> </body> </html>
האם מידע זה היה מועיל?
