.wrapInner( wrappingElement )
מחזירה: jQuery
תיאור: עוטף מבנה HTML מסביב לתוכן של כל אלמנט ברשימה של אלמנטים בהתאמה.
.wrapInner( wrappingElement )
הוספה בגרסה: 1.2
קטע HTML, ביטוי בחירה, אובייקט jQuery, או אלמנט DOM המציין מבנה עבור עטיפה מסביב לתוכן של אלמנטים בהתאמה.
.wrapInner( wrappingFunction )
הוספה בגרסה: 1.4
wrappingFunction
פונקציה של קריאה חוזרת, שיוצרת מבנה כדי לעטוף תוכן של האלמנטים בהתאמה.
פונקציה .wrapAll() יכולה לקבל כל מחרוזת או אובייקט, שיכולים להיות נשלחים לתוך מיפעל הפונקציות
$()
כדי להגדיר מבנה
DOM.
מבנה הזה יכול להיות מקונן במספר רמות עומק, אבל הוא צריך להכיל רק אלמנט אחרון פנימיי אחד.
מבנה עוטף תוכן של כל אלמנט מרשימת אלמנטים בהתאמה.
נבחן HTML הבא:
<div class="container"> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div>
באמצעות .wrapInner(),
אנחנו יכולים להכניס מבנה
HTML
מסביב לתוכן של האלמנט <div class="inner">, כמו:
$('.inner').wrapInner('<div class="new" />');
אלמנט <div class="new">
מיוצר בלטוס ומתווסף ל-
DOM.
כתוצאה
<div class="new">
עוטף מסביב תוכן של כל אלמנט בהתאמה:
<div class="container">
<div class="inner">
<div class="new">Hello</div>
</div>
<div class="inner">
<div class="new">Goodbye</div>
</div>
</div>
גירסה שניה של שיטה הזו מאפשרת לנו להגדיר פונקציה של קריאה חוזרת. פונקציה של קריאה חוזרת תופעל רק פעם אחת עבור כל אלמנט בהתאמה; היא צריכה להחזיר אלמנט DOM, אובייקט jQuery או קטע של HTML, שבו יועטף אלמנט בהתאמה. לדוגמה:
$('.inner').wrapInner(function() {
return '<div class="' + this.nodeValue + '" />';
});
זה יגרום לכך שלכל
<div>
תהיה מחלקה, התואמת לטקסט העוטף:
<div class="container">
<div class="inner">
<div class="Hello">Hello</div>
</div>
<div class="inner">
<div class="Goodbye">Goodbye</div>
</div>
</div>
דוגמאות
דוגמה 1
מוצא כל הפסקאות במסמך ועוטף את תוכן שלהם בתג b ( bold text ) .$("p").wrapInner("<b></b>");
דוגמה 1 - קוד מלא:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("p").wrapInner("<b></b>"); }); </script> <style>p { background:#bbf; }</style> </head> <body> <p>Hello</p> <p>cruel</p> <p>World</p> </body> </html>
דוגמה 2
מוצא כל הפסקאות במסמך ועוטף את תוכן שלהם בתג b ( bold text ) .$("p").wrapInner(document.createElement("b"));
דוגמה 2 - קוד מלא:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("p").wrapInner(document.createElement("b")); }); </script> <style>p { background:#9f9; }</style> </head> <body> <p>Hello</p> <p>cruel</p> <p>World</p> </body> </html>
דוגמה 3
עוטף עץ החדש שנוצר של אובייקטים מסביב לתוכן של גוף המסמך.("body").wrapInner("<div><div><p><em><b></b></em></p></div></div>");
דוגמה 3 - קוד מלא:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ $("body").wrapInner("<div><div><p><em><b></b></em></p></div></div>"); }); </script> <style> div { border:2px green solid; margin:2px; padding:2px; } p { background:yellow; margin:2px; padding:2px; } </style> </head> <body> Plain old text, or is it? </body> </html>
דוגמה 4
עוטף עץ החדש שנוצר של אובייקטים מסביב לתוכן של גוף המסמך.$("p").wrapInner($("<span class='red'></span>"));
דוגמה 4 - קוד מלא:
<!DOCTYPE html>
<html>
<head>
<style>
p { background:#9f9; }
.red { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("p").wrapInner($("<span class='red'></span>"));
});
</script>
</head>
<body>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
</body>
</html>
האם מידע זה היה מועיל?
