.replaceWith( newContent )
מחזירה: jQuery
תיאור: מחליפה כל אלמנט ברשימה של אלמנטים בהתאמה עם תוכן חדש.
.replaceWith( newContent )
הוספה בגרסה: 1.2
תוכן להכנסה. יכול להיות מחרוזת
HTML,
אלמנט DOM,
או אובייקט jQuery.
.replaceWith( function )
הוספה בגרסה: 1.4
function
פונקציה שמחזירה מחרוזת
HTML
כדי להחליפה באלמנטים בהתאמה.
שיטה .replaceWith()
מאפשרת לנו למחוק תוכן ממסמך ולהכניס תוכן חדש במקומו בקריאה אחת. נבחן מבנה DOM הבא:
<div class="container"> <div class="inner first">Hello</div> <div class="inner second">And</div> <div class="inner third">Goodbye</div> </div>
אנחנו יכולים להחליף
<div>
שני פנימי על HTML שצוין:
$('.second').replaceWith('<h2>New heading</h2>');
התוצאה היא מבנה:
<div class="container"> <div class="inner first">Hello</div> <h2>New heading</h2> <div class="inner third">Goodbye</div> </div>
אנחנו יכולים להשוות כל האלמנטים הפנימיים
<div> בבת אחת:
$('.inner').replaceWith('<h2>New heading</h2>');
כתוצאה כולם יוחלפו:
<div class="container"> <h2>New heading</h2> <h2>New heading</h2> <h2>New heading</h2> </div>
לחלופין, נוכל לבחור אלמנט כדי להשתמש כתחליף:
$('.third').replaceWith($('.first'));
התוצאה היא מבנה DOM:
<div class="container"> <div class="inner second">And</div> <div class="inner first">Hello</div> </div>
מהדוגמה זו, אנו יכולים לראות כי אלמנט הנבחר מחליף יעד על ידי העברה ממקומו הישן, ולא על ידי שיכפול.
שיטה .replaceWith(),
כמו גם רוב השיטות של
jQuery, מחזירות אובייקט jQuery
כך ששיטות אחרות יכולות להיות מצורפות אליו.
עם זאת יש לציין, שמוחזר אובייקט
jQuery
ב-jQuery 1.4
.replaceWith(), .before(), ו- .after()
גם יכולות לעבוד על צמתי
DOM
מכוביים.
לדוגמה עם קוד הבא:
$("<div/>").replaceWith("<p></p>");
שיטה .replaceWith()
מחזירה רשימת
jQuery
המכילה רק פסקה.
דוגמאות
דוגמה 1
בלחיצה מחליף כפתור על div מכיל אותו טקסט. $("button").click(function () {
$(this).replaceWith("<div>" + $(this).text() + "</div>");
});
דוגמה 1 - קוד מלא:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("button").click(function () { $(this).replaceWith("<div>" + $(this).text() + "</div>"); }); }); </script> <style> button { display:block; margin:3px; color:red; width:200px; } div { color:red; border:2px solid blue; width:200px; margin:3px; text-align:center; } </style> </head> <body> <button>First</button> <button>Second</button> <button>Third</button> </body> </html>
דוגמה 2
מחליף כל הפסקאות עם מילים מודגשות.$("p").replaceWith("<b>Paragraph. </b>");
דוגמה 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").replaceWith("<b>Paragraph. </b>"); }); </script> </head> <body> <p>Hello</p> <p>cruel</p> <p>World</p> </body> </html>
דוגמה 3
מחליף את כל הפסקאות עם אלמנטים div רייקים.
$("p").replaceWith(document.createElement("div"));
דוגמה 3 - קוד מלא:
<!DOCTYPE html>
<html>
<head>
<style>
div { border:2px solid blue; margin:3px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("p").replaceWith(document.createElement("div"));
});
</script>
</head>
<body>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
<script>$("p").replaceWith(document.createElement("div"));</script>
</body>
</html>
דוגמה 4
בלחיצה מחליף כל פסקה עם אובייקט jQuery DIV, שכבר נמצא במסמך. שימו לב, זה לא משכפל אובייקט, אלא בעביר אותו כדי להחליף פסקה.דוגמה 4 - קוד מלא:
<!DOCTYPE html>
<html>
<head>
<style>
div { border:2px solid blue; color:red; margin:3px; }
p { border:2px solid red; color:blue; margin:3px; cursor:pointer; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("p").click(function () {
$(this).replaceWith($("div"));
});
});
</script>
</head>
<body>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
<div>Replaced!</div>
</body>
</html>
האם מידע זה היה מועיל?
