jQuery 3.3

.wrap()




jquery

.wrap (wrappingElement) الإرجاع: jQuery

الوصف: لف هيكل HTML حول كل عنصر في مجموعة العناصر المتطابقة.

  • الإصدار المضافة: 1.0 التفاف (wrappingElement)

    • wrappingElement
      النوع: Selector أو htmlString أو Element أو jQuery
      محدد أو عنصر أو سلسلة HTML أو كائن jQuery يحدد الهيكل ليتم التفاف حول العناصر المطابقة. عندما تقوم بتمرير مجموعة jQuery تحتوي على أكثر من عنصر واحد ، أو محددًا يتطابق مع أكثر من عنصر واحد ، فسيتم استخدام العنصر الأول.
  • الإصدار المضافة: 1.4 التفاف (وظيفة)

    • وظيفة
      النوع: Function (فهرس Integer ) => String أو jQuery
      وظيفة رد اتصال تعرض محتوى HTML أو كائن jQuery للتفاف حول العناصر المتطابقة. يستقبل موضع فهرس العنصر في المجموعة كوسيطة. داخل الدالة ، يشير this إلى العنصر الحالي في المجموعة.

يمكن أن تأخذ الدالة .wrap() أي سلسلة أو كائن يمكن تمريره إلى دالة المصنع $() لتحديد بنية DOM. قد تكون هذه البنية متداخلة عدة مستويات ، ولكن يجب أن تحتوي على عنصر واحد فقط. سيتم التفاف نسخة من هذه البنية حول كل عنصر من العناصر الموجودة في مجموعة العناصر المتطابقة. هذا الأسلوب بإرجاع مجموعة العناصر الأصلية لأغراض التسلسل.

خذ بعين الاعتبار HTML التالية:

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

باستخدام .wrap() ، يمكننا إدراج بنية HTML حول عناصر <div> الداخلية مثل:

$( ".inner" ).wrap( "<div class='new'></div>" );

يتم إنشاء عنصر <div> الجديد على الطاير وإضافته إلى DOM. والنتيجة هي <div> جديدة ملفوفة حول كل عنصر متطابق:

<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
  </div>
  <div class="new">
    <div class="inner">Goodbye</div>
  </div>
</div>

يسمح لنا الإصدار الثاني من هذه الطريقة بتحديد وظيفة رد اتصال بدلاً من ذلك. سيتم استدعاء وظيفة معاودة الاتصال هذه مرة واحدة لكل عنصر متطابق ؛ يجب أن يعرض عنصر DOM ، أو كائن jQuery ، أو مقتطف HTML الذي سيتم فيه التفاف العنصر المقابل. فمثلا:

$( ".inner" ).wrap(function() {
  return "<div class='" + $( this ).text() + "'></div>";
});

سيؤدي هذا إلى جعل كل قسم <div> للنص الذي يلتف عليه:

<div class="container">
  <div class="Hello">
    <div class="inner">Hello</div>
  </div>
  <div class="Goodbye">
    <div class="inner">Goodbye</div>
  </div>
</div>

أمثلة:

التفاف div الجديد حول جميع الفقرات.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>wrap demo</title>
  <style>
  div {
    border: 2px solid blue;
  }
  p {
    background: yellow;
    margin: 4px;
  }
  </style>
  <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" ).wrap( "<div></div>" );
</script>
 
</body>
</html>

عرض:

يلتف شجرة تم إنشاؤها حديثا من الكائنات حول الامتدادات. لاحظ أن أي شيء بين الفواصل يمتد مثل <strong> (النص الأحمر) في هذا المثال. حتى المساحة البيضاء بين الفواصل غير موجودة. انقر فوق عرض المصدر لمشاهدة html الأصلي

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>wrap demo</title>
  <style>
  div {
    border: 2px blue solid;
    margin: 2px;
    padding: 2px;
  }
  p {
    background: yellow;
    margin: 2px;
    padding: 2px;
  }
  strong {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<span>Span Text</span>
<strong>What about me?</strong>
<span>Another One</span>
 
<script>
$( "span" ).wrap( "<div><div><p><em><b></b></em></p></div></div>" );
</script>
 
</body>
</html>

عرض:

التفاف div الجديد حول جميع الفقرات.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>wrap demo</title>
  <style>
  div {
    border: 2px solid blue;
  }
  p {
    background: yellow;
    margin: 4px;
  }
  </style>
  <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" ).wrap( document.createElement( "div" ) );
</script>
 
</body>
</html>

عرض:

التفاف div مزدوجة jQuery كائن div حول كافة الفقرات. لاحظ أنها لا تحرك الكائن ولكنها تستنسخ فقط من أجل الالتفاف حول هدفها.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>wrap demo</title>
  <style>
  div {
    border: 2px solid blue;
    margin: 2px;
    padding: 2px;
  }
  .doublediv {
    border-color: red;
  }
  p {
    background: yellow;
    margin: 4px;
    font-size: 14px;
  }
  </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 class="doublediv"><div></div></div>
 
<script>
$( "p" ).wrap( $( ".doublediv" ) );
</script>
 
</body>
</html>

عرض: