.wrapAll( wrappingElement )
מחזירה: jQuery
תיאור: עוטף מבנה HTML מסביב לכל האלמנטים ברשימה של אלמנטים בהתאמה.
.wrapAll( wrappingElement )
הוספה בגרסה: 1.2
קטע HTML,
ביטוי בחירה, אובייקט
jQuery,
או אלמנט
DOM
המציין מבנה עבור עטיפה מסביב לאלמנטים בהתאמה.
פונקציה .wrapAll() יכולה לקבל כל מחרוזת או אובייקט, שיכולים להיות נשלחים לתוך מיפעל הפונקציות
$()
כדי להגדיר מבנה
DOM.
מבנה הזה יכול להיות מקונן במספר רמות עומק, אבל הוא צריך להכיל רק אלמנט אחרון פנימיי אחד.
מבנה עוטף כל האלמנטים מרשימת אלמנטים בהתאמה, כקבוצה אחת.
נבחן HTML הבא:
<div class="container"> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div>
באמצעות .wrap(),
אנחנו יכולים להכניס מבנה
HTML
מסביב לאלמנט <div class="inner">, כמו:
$('.inner').wrapAll('<div class="new" />');
אלמנט <div class="new">
מיוצר בלטוס ומתווסף ל-
DOM.
כתוצאה
<div class="new">
עוטף מסביב כל האלמנטים בהתאמה:
<div class="container">
<div class="new">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
</div>
דוגמאות
דוגמה 1
עוטף div חדש מסביב לכל הפסקאות.$("p").wrapAll("<div></div>");
דוגמה 1 - קוד מלא:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("p").wrapAll("<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
עוטף עץ אובייקטים החדש שנוצר מסביב ל- spans. שימו לב, כל מה שנמצא מעבר לאובייקט span , כמו <strong> ( טקסט אדום ) בדוגמה אזו, נשאר ללא שינוי. תלחצו על View Source כדי לראות קוד html חדש .$("span").wrapAll("<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").wrapAll("<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").wrapAll(document.createElement("div"));
דוגמה 3 - קוד מלא:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("p").wrapAll(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
עוטף כל הפסקאות בדף לתוך האובייקט div כפול של jQuery. שימו לב שזה לא מזיז אובייקט אלא משכפל אותו מסביב ליעד.$("p").wrapAll($(".doublediv"));
דוגמה 4 - קוד מלא:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("p").wrapAll($(".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>
האם מידע זה היה מועיל?
