jQuery 3.3

.replaceWith()




jquery

.replaceWith (newContent) الإرجاع: jQuery

الوصف: استبدل كل عنصر في مجموعة العناصر المتطابقة بالمحتوى الجديد المقدم وأعد مجموعة العناصر التي تمت إزالتها.

  • الإصدار المضاف: 1.2 .replaceWith (newContent)

    • محتوى جديد
      النوع: htmlString أو Element أو Array أو jQuery
      محتوى لإدراج. قد تكون سلسلة HTML ، أو عنصر DOM ، أو صفيف لعناصر DOM ، أو كائن jQuery.
  • الإصدار المضاف: 1.4 .replaceWith (وظيفة)

    • وظيفة
      النوع: Function ()
      دالة تقوم بارجاع المحتويات التي سيتم بها استبدال مجموعة العناصر المتطابقة.

تقوم طريقة .replaceWith() بإزالة المحتوى من DOM وإدراج محتوى جديد في مكانه بمكالمة واحدة. خذ بعين الاعتبار بنية 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 المحدد:

$( "div.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> الداخلية دفعة واحدة:

$( "div.inner" ).replaceWith( "<h2>New heading</h2>" );

هذا يؤدي إلى استبدال كل منهم:

<div class="container">
  <h2>New heading</h2>
  <h2>New heading</h2>
  <h2>New heading</h2>
</div>

يمكن أيضًا اختيار عنصر كبديل:

$( "div.third" ).replaceWith( $( ".first" ) );

هذه النتائج في بنية DOM:

<div class="container">
  <div class="inner second">And</div>
  <div class="inner first">Hello</div>
</div>

يوضح هذا المثال أن العنصر المحدد يستبدل الهدف عن طريق نقله من موقعه القديم ، وليس عن طريق الاستنساخ.

تقوم طريقة .replaceWith() ، مثل معظم أساليب jQuery ، بإرجاع كائن jQuery بحيث يمكن .replaceWith() الطرق الأخرى عليه. ومع ذلك ، يجب ملاحظة أنه يتم إرجاع كائن jQuery الأصلي . يشير هذا الكائن إلى العنصر الذي تمت إزالته من DOM ، وليس العنصر الجديد الذي حل محله.

ملاحظات إضافية:

  • تقوم طريقة .replaceWith() بإزالة جميع معالجات الأحداث والبيانات المرتبطة بالعقد المزالة.
  • قبل jQuery 1.9 ، .replaceWith() إضافة أو تغيير العقد في مجموعة jQuery الحالية إذا لم تكن العقدة الأولى في المجموعة متصلة بمستند ، وفي هذه الحالات ، قم بإرجاع مجموعة jQuery جديدة بدلاً من المجموعة الأصلية. ربما تكون هذه الطريقة قد عادت أو لم تعيد نتيجة جديدة اعتمادا على عدد أو اتصال الحجج! بدءًا من jQuery 1.9 ، فإن .after() و .before() و .replaceWith() دائمًا .replaceWith() المجموعة الأصلية غير المعدلة. محاولة استخدام هذه الطرق على عقدة بدون أحد الوالدين ليس لها أي تأثير - أي ، لا يتم تغيير المجموعة ولا العقد التي تحتويها.

أمثلة:

عند النقر ، استبدل الزر بـ div الذي يحتوي على الكلمة نفسها.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>replaceWith demo</title>
  <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>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<button>First</button>
<button>Second</button>
<button>Third</button>
 
<script>
$( "button" ).click(function() {
  $( this ).replaceWith( "<div>" + $( this ).text() + "</div>" );
});
</script>
 
</body>
</html>

عرض:

استبدل جميع الفقرات بكلمات غامقة.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>replaceWith demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>Hello</p>
<p>cruel</p>
<p>World</p>
 
<script>
$( "p" ).replaceWith( "<b>Paragraph. </b>" );
</script>
 
</body>
</html>

عرض:

عند النقر ، استبدل كل فقرة بـ div موجود بالفعل في DOM وحدد مع الدالة $() . لاحظ أنها لا تستنسخ الكائن بل تحركه لتحل محل الفقرة.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>replaceWith demo</title>
  <style>
  div {
    border: 2px solid blue;
    color: red;
    margin: 3px;
  }
  p {
    border: 2px solid red;
    color: blue;
    margin: 3px;
    cursor: pointer;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
  <p>Hello</p>
  <p>cruel</p>
  <p>World</p>
  <div>Replaced!</div>
 
<script>
$( "p" ).click(function() {
  $( this ).replaceWith( $( "div" ) );
});
</script>
 
</body>
</html>

عرض:

عند النقر فوق الزر ، استبدل القيمة div التي تحتوي على divs التابعة لها وألحق اسم الفئة للعنصر المحدد بالفقرة.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>replaceWith demo</title>
  <style>
  .container {
    background-color: #991;
  }
  .inner {
    color: #911;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>
  <button>Replace!</button>
</p>
<div class="container">
  <div class="inner">Scooby</div>
  <div class="inner">Dooby</div>
  <div class="inner">Doo</div>
</div>
 
<script>
$( "button" ).on( "click", function() {
  var $container = $( "div.container" ).replaceWith(function() {
    return $( this ).contents();
  });
 
  $( "p" ).append( $container.attr( "class" ) );
});
</script>
 
</body>
</html>

عرض: