תיאור: מוסיף אלמנטים לסט אלמנטים בהתאמה.
.add( selector )
הוספה בגרסה: 1.0
selector
מחרוזת המכילה ביטוי, לסינון אלמנטים.
.add( elements )
הוספה בגרסה: 1.0
elements
אחד או יותר אלמנטים להוספה לקבוצת אלמנטים בהתאמה.
.add( html )
הוספה בגרסה: 1.0
html
קטע HTML להוספה לקבוצת אלמנטים בהתאמה.
.add( selector, context )
הוספה בגרסה: 1.4
selector
מחרוזת המכילה ביטוי, לסינון אלמנטים.
context
מוסיף כמה אלמנטים בהתאם לקונטכסט.
בהינתן אובייקט jQuery, שמספק קבוצת אלמנטים DOM, שיטה
.add()
בונה אובייקט חדש
jQuery
מאוסף של אלמנטים האלה ופעם אחת שולחת אותם לשיטה.
בתור ארגומנט של
.add()
יכול להיות כל דבר,
שמתקבל על ידי
$(),
כולל ביטוי בחירה של
jQuery,
הפניות לאלמנטים של DOM,
או קטע של
HTML.
נתבונן על דף עם רשימה פשוטה ופסקה שבאה אחריה:
<ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> </ul> <p>a paragraph</p>
אנחנו יכולים לבחור אלמנטים של רשימה, ואחריהם פסקה, באמצעות או סלקטור או הפניה לאלמנט
DOM עצמו,
כי ארגומנט של שיטה .add():
$('li').add('p').css('background-color', 'red');
או:
$('li').add(document.getElementsByTagName('p')[0])
.css('background-color', 'red');
התוצאה של הפעלה הזו היא רקע אדום עבור כל ארבעה אלמנטים.
שימוש בקטע HTML כי ארגומנט של שיטה
.add()
(כמו בגרסה השלישית),
אנחנו יכולים ליצור אלמנטים נוספים ולהוסיף אלמנטים האלה לסט אלמנטים בהתאמה.
נגיד, לדוגמא, אנחנו רוצים לשנות רקע של רשימת פריטים יחד עם פיסקה חדשה שנוצרה:
$('li').add('<p id="new">new paragraph</p>')
.css('background-color', 'red');
למרות שפסקה חדשה נוצרה וצבע רקע השתנה, היא עדיין לא מופיעה על הדף. כדי לשים אותה על הדף, אנחנו יכולים להוסיף אחת מהשיטות שרשור.
החל מ- jQuery 1.4 תוצאה מ- .add()
תמיד תחזיר מסמך מסודר
(ולא שרשור פשוט).
דוגמאות
דוגמה 1
מחפש כל האלמנטים מסוג div ומוסיף להם מסגרת בצבע אדום. אחרי זה כל הפסקאות מתווספות לאובייקט הקיים של jQuery ומגדיר להן צבע רקע צהוב.דוגמה 1 - קוד מלא:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ $("div").css("border", "2px solid red") .add("p") .css("background", "yellow"); }); </script> <style> div { width:60px; height:60px; margin:10px; float:left; } p { clear:left; font-weight:bold; font-size:16px; color:blue; margin:0 10px; padding:2px; } </style> </head> <body> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <p>Added this... (notice no border)</p> </body> </html>
דוגמה 2
מוסיף בקבוצה הקיימת אלמנטים נוספים שתואמים לביטוי שצוין.דוגמה 2 - קוד מלא:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ $("p").add("span").css("background", "yellow"); }); </script> </head> <body> <p>Hello</p><span>Hello Again</span> </body> </html>
דוגמה 3
מוסיף בקבוצה הקיימת אלמנטים נוספים שנוצרו במהירות הבזקדוגמה 3 - קוד מלא:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ $("p").clone().add("<span>Again</span>").appendTo(document.body); }); </script> </head> <body> <p>Hello</p> </body> </html>
דוגמה 4
מוסיף בקבוצה הקיימת אחד או יותר אלמנטים.דוגמה 4 - קוד מלא:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ $("p").add(document.getElementById("a")).css("background", "yellow"); }); </script> </head> <body> <p>Hello</p><span id="a">Hello Again</span> </body> </html>
דוגמה 5
מציג כיצד להוסיף אלמנטים בקבוצה הקיימת.var collection = $("p");
// capture the new collection
collection = collection.add(document.getElementById("a"));
collection.css("background", "yellow");
דוגמה 5 - קוד מלא:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ $("p").add(document.getElementById("a")).css("background", "yellow"); }); </script> </head> <body> <p>Hello</p><span id="a">Hello Again</span> </body> </html>
האם מידע זה היה מועיל?
