عرض مصدر jQuery/wrapInner

<noinclude>{{DISPLAYTITLE:التابع <code>‎.wrapInner()‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎</code>‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎ في jQuery}}</noinclude>
== <code>‎.wrapInner( wrappingElement )‎</code> ==

=== القيمة المعادة ===
يُعيد كائنًا من النوع <nowiki/>[[jQuery/jQuery|jQuery]].

=== الوصف ===
تغليف شيفرة HTML حول محتوى كل عنصر في مجموعة العناصر المُطابقة.

=== <code>‎.wrapInner( wrappingElement )‎</code> ===
أُضيف مع الإصدار: [http://api.jquery.com/category/version/1.2 1.2].

==== <code>wrappingElement</code> ====
شيفرة HTML أو تعبير مُحدد أو كائن jQuery أو عنصر DOM يحدد شيفرة تغليف محتوى العناصر المُطابقة. وهو من النوع Selector أو htmlString أو <nowiki/>[[JavaScript/Element|Element]] أو <nowiki/>[[jQuery/jQuery|jQuery]].

<code>‎.wrapInner( function )‎</code>

أُضيف مع الإصدار: [http://api.jquery.com/category/version/1.4 1.4].

==== <code>function</code> ====
دالة على الشكل <code>[[JavaScript/Function/call|Function]]( Integer index ) => [[JavaScript/String|String]]</code>. 

وهي دالة رد نداء تُنشئ شيفرة HTML لتغليف محتوى العناصر المُطابقة. وهي تستقبل موضع فهرس العنصر في المجموعة كوسيط. داخل الدالة، يشير <code>[[JavaScript/this|this]]</code> إلى العنصر الحالي في المجموعة.

يمكن أن تأخذ الدالة ‎<code>.wrapInner()‎‎</code> أي سلسلة أو كائن يمكن تمريره إلى الدالة ‎<code>$()</code>‎‎ لتحديد بنية DOM. قد تكون هذه البنية متداخلة لعدة مستويات، ولكن يجب أن تحتوي على عنصر عميق (inmost) واحد فقط. ستُغلّف شيفرة HTML محتوى كل عنصر في مجموعة العناصر المُطابقة.

إليك شيفرة HTML التالية:<syntaxhighlight lang="html">
<div class="container">
  <div class="inner">مرحبًا</div>
  <div class="inner">إلى اللقاء</div>
</div>
</syntaxhighlight>يمكن باستخدام ‎<code>.wrapInner()</code>‎‎ إدراج بنية HTML حول محتوى كل عناصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> الداخلية مثل:<syntaxhighlight lang="jquery">
$( ".inner" ).wrapInner( "<div class='new'></div>");
</syntaxhighlight>يُنشأ عنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> الجديد مباشرة ويُضاف إلى DOM. والنتيجة هي عنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> جديد يُغلّف كل عنصر مُطابق:<syntaxhighlight lang="html">
<div class="container">
  <div class="inner">
    <div class="new">مرحبًا</div>
  </div>
  <div class="inner">
    <div class="new">إلى اللقاء</div>
  </div>
</div>
</syntaxhighlight>يسمح لنا الإصدار الثاني من هذا التابع بتحديد دالة رد نداء بدلاً من ذلك. ستُستدعى دالة رد النداء هذه مرة واحدة لكل عنصر مطابق؛ ويجب أن تُعيد عنصر DOM، أو كائن jQuery، أو مقتطف HTML الذي سيُغلّف فيه العنصر المقابل. فمثلاً:<syntaxhighlight lang="jquery">
$( ".inner" ).wrapInner(function() {
  return "<div class='" + this.nodeValue + "'></div>";
});
</syntaxhighlight>سيؤدي هذا إلى أن يكون لكل عنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> صنف مقابل للنص الذي يغلفه فيه:<syntaxhighlight lang="html">
<div class="container">
  <div class="inner">
    <div class="مرحبًا">مرحبًا</div>
  </div>
  <div class="inner">
    <div class="إلى اللقاء">إلى اللقاء</div>
  </div>
</div>
</syntaxhighlight>ملاحظة: عند تمرير سلسلة محدد إلى دالة ‎<code>.wrapInner()</code>‎‎، فإن المدخلات المتوقعة تكون شيفرة HTML منضبطة مع وسوم إغلاق صحيحة. الأمثلة على الإدخال الصحيح تتضمن:<syntaxhighlight lang="jquery">
$( elem ).wrapInner( "<div class='test'></div>" );
$( elem ).wrapInner( "<div class=\"test\"></div>" );
</syntaxhighlight>

=== أمثلة ===
تحديد كل الفقرات <code>[[HTML/p|<nowiki><p></nowiki>]]</code> وتغليف كل محتوياتها بالعنصر <code>[[HTML/b|<nowiki><b></nowiki>]]</code>:<syntaxhighlight lang="html">
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>wrapInner مثال على التابع</title>
  <style>
  p {
    background: #bbf;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>مرحبًا</p>
<p>أيها</p>
<p>العالم</p>
 
<script>
$( "p" ).wrapInner( "<b></b>" );
</script>
 
</body>
</html>
</syntaxhighlight>التغليف بشجرة من الكائنات حديثة الإنشاء حول محتوى العنصر <code>[[HTML/body|<body>]]</code>:<syntaxhighlight lang="html">
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>wrapInner مثال على التابع</title>
  <style>
  div {
    border: 2px green solid;
    margin: 2px;
    padding: 2px;
  }
  p {
    background: yellow;
    margin: 2px;
    padding: 2px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
نص قديم بسيط.
 
<script>
$( "body" ).wrapInner( "<div><div><p><em><b></b></em></p></div></div>" );
</script>
 
</body>
</html>
</syntaxhighlight>تحديد كل الفقرات <code>[[HTML/p|<nowiki><p></nowiki>]]</code> وتغليف كل محتوياتها بالعنصر <code>[[HTML/b|<nowiki><b></nowiki>]]</code>:<syntaxhighlight lang="html">
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>wrapInner مثال على التابع</title>
  <style>
  p {
    background: #9f9;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>مرحبًا</p>
<p>أيها</p>
<p>العالم</p>
 
<script>
$( "p" ).wrapInner( document.createElement( "b" ) );
</script>
 
</body>
</html>
</syntaxhighlight>تحديد كل الفقرات <code>[[HTML/p|<nowiki><p></nowiki>]]</code> وتغليف محتوياتها بكائن jQuery:<syntaxhighlight lang="html">
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>wrapInner مثال على التابع</title>
  <style>
  p {
    background: #9f9;
  }
  .red {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>مرحبًا</p>
<p>أيها</p>
<p>العالم</p>
 
<script>
$( "p" ).wrapInner( $( "<span class='red'></span>" ) );
</script>
 
</body>
</html>
</syntaxhighlight>

== مصادر ==
* [http://api.jquery.com/wrapInner/ صفحة التابع ‎ ‎.wrapInner()‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎في توثيق jQuery الرسمي.]
[[تصنيف:jQuery]]
[[تصنيف:jQuery Method]]
[[تصنيف:jQuery Manipulation]]