.before( content )
מחזירה: jQuery
תיאור: מכניס תוכן, שמוגדר על ידי פרמטר, לפני כל אלמנט בהתאמה.
.before( content )
הוספה בגרסה: 1.0
אלמנט, מחרוזת HTML, או אובייקט jQuery כדי להכניס לפני כל אלמנט ברשימה של אלמנטים בהתאמה.
.before( function(index) )
הוספה בגרסה: 1.4
function(index)
פונקציה שמחזירה מחרוזת HTML כדי להכניס לפני כל אלמנט ברשימה של אלמנטים בהתאמה.
שיטות .before() ו- .insertBefore() מבצעות את אותן משימות. ההבדל העיקרי הוא התחביר, מיקום התוכן והיעד.
עם .before(), ביטוי בחירה שקודם לשיטה הוא המיכל שלפניו יוכנס התוכן.
עם .insertBefore(),
מצד שני, תוכן הקודם לשיטה, כמו גם סלקטור של הביטוי, או סימון מיוצר בלטוס, ומוכנס לפני המיכל היעד.
נבחן HTML הבא:
<div class="container"> <h2>Greetings</h2> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div>
אנחנו יכולים ליצור תוכן ולהכניס אותו לפני מספר אלמנטים בו זמנית:
$('.inner').before('<p>Test</p>');
כל אלמנט <div class="inner">
יקבל תוכן חדש:
<div class="container"> <h2>Greetings</h2> <p>Test</p> <div class="inner">Hello</div> <p>Test</p> <div class="inner">Goodbye</div> </div>
אנחנו גם יכולים לבחור אלמנט בדף ולהכניס אותו לפני אלמנט אחר:
$('.container').before($('h2'));
אם אלמנט הנבחר בצורה הזו להכניס למקומות אחרים, הוא יעבור לפני האלמנט היעד (לא משוכפל):
<h2>Greetings</h2> <div class="container"> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div>
אם קיים יותר מאלמנט היעד אחד, לעומת זאת, ישוכפלו עותקים עבור כל היעד אחרי הראשון.
החל מ-jQuery 1.4, .before() ו- .after()
עובדים גם על צמתי DOM מנותקים:
$("<div/>").before("<p></p>");
התוצאה היא רשימה jQuery, המכילה פסקה ו- div (בסדר יורד).
דוגמאות
דוגמה 1
מוסיף קוד HTML לפני כל הפסקאות.$("p").before("<b>Hello</b>");
דוגמה 1 - קוד מלא:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("p").before("<b>Hello</b>"); }); </script> <style>p { background:yellow; }</style> </head> <body> <p> is what I said...</p> </body> </html>
דוגמה 2
מוסיף אלמנט DOM לפני כל הפסקאותדוגמה 2 - קוד מלא:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("p").before( document.createTextNode("Hello") ); }); </script> <style>p { background:yellow; }</style> </head> <body> <p> is what I said...</p> </body> </html>
דוגמה 3
מוסיף אובייקט jQuery ( דומה למערך של אלמנטים DOM ) לפני כל הפסקאות.דוגמה 3 - קוד מלא:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("p").before( $("b") ); }); </script> <style>p { background:yellow; }</style> </head> <body> <p> is what I said...</p><b>Hello</b> </body> </html>
האם מידע זה היה מועיל?
