الفرق بين المراجعتين ل"jQuery/wrap"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
 
(3 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة)
سطر 5: سطر 5:
 
يُعيد كائنًا من النوع [[jQuery/jQuery|jQuery]].
 
يُعيد كائنًا من النوع [[jQuery/jQuery|jQuery]].
  
−
الوصف لف هيكل HTML حول كل عنصر في مجموعة العناصر المُطابقة.
+
=== الوصف ===
 +
تغليف شيفرة HTML حول كل عنصر في مجموعة العناصر المُطابقة.
  
 
=== <code>‎.wrap( wrappingElement )‎</code> ===
 
=== <code>‎.wrap( wrappingElement )‎</code> ===
سطر 11: سطر 12:
  
 
==== <code>wrappingElement</code> ====
 
==== <code>wrappingElement</code> ====
−
مُحدد أو عنصر أو سلسلة HTML أو كائن jQuery يحدد الهيكل المراد التفافه حول العناصر المُطابقة. عند تمرير مجموعة jQuery تحتوي على أكثر من عنصر واحد، أو محدد يتطابق مع أكثر من عنصر واحد، فسيُستخدم العنصر الأول. وهو من النوع [[JavaScript/Selector|Selector]] أو [[JavaScript/String|htmlString]] أو [[JavaScript/Element|Element]] أو [[jQuery/jQuery|jQuery]]
+
مُحدد أو عنصر أو سلسلة HTML أو كائن jQuery يحدد الشيفرة المراد تغليفها حول العناصر المُطابقة. عند تمرير مجموعة jQuery تحتوي على أكثر من عنصر واحد، أو محدد يتطابق مع أكثر من عنصر واحد، فسيُستخدم العنصر الأول. وهو من النوع Selector أو htmlString أو [[JavaScript/Element|Element]] أو [[jQuery/jQuery|jQuery]].
  
 
=== <code>‎.wrap( function )‎</code> ===
 
=== <code>‎.wrap( function )‎</code> ===
سطر 17: سطر 18:
  
 
==== <code>function</code> ====
 
==== <code>function</code> ====
−
دالة على الشكل [[JavaScript/Function|Function]]( Integer index ) => [[JavaScript/String|String]] or [[jQuery/jQuery|jQuery]].
+
دالة على الشكل <code>[[JavaScript/Function|Function]]( [[JavaScript/Integer|Integer]] index ) => [[JavaScript/String|String]] or [[jQuery/jQuery|jQuery]]</code>.
  
 
وهي دالة رد نداء تُعيد محتوى HTML أو كائن jQuery المراد التفافها حول العناصر المطابقة. وهي تستقبل موضع فهرس العنصر في المجموعة كوسيط. داخل الدالة، يشير <code>[[JavaScript/this|this]]</code> إلى العنصر الحالي في المجموعة.
 
وهي دالة رد نداء تُعيد محتوى HTML أو كائن jQuery المراد التفافها حول العناصر المطابقة. وهي تستقبل موضع فهرس العنصر في المجموعة كوسيط. داخل الدالة، يشير <code>[[JavaScript/this|this]]</code> إلى العنصر الحالي في المجموعة.
  
−
يمكن أن تأخذ الدالة ‎<code>.wrap()</code>‎ أي سلسلة أو كائن يمكن تمريره إلى دالة المصنع <code>‎$()</code>‎ لتحديد بنية DOM. قد تكون هذه البنية متداخلة لعدة مستويات، ولكن يجب أن تحتوي على عنصر عميق واحد فقط. ستلتف نسخة من هذه البنية حول كل عنصر من العناصر الموجودة في مجموعة العناصر المُطابقة. هذا التابع يُعيد مجموعة العناصر الأصلية لأغراض التسلسل (chaining).
+
يمكن أن تأخذ الدالة ‎<code>.wrap()</code>‎ أي سلسلة أو كائن يمكن تمريره إلى الدالة <code>‎$()</code>‎ لتحديد بنية DOM. قد تكون هذه البنية متداخلة لعدة مستويات، ولكن يجب أن تحتوي على عنصر عميق (inmost) واحد فقط. ستُغلّف نسخة من هذه البنية حول كل عنصر من العناصر الموجودة في مجموعة العناصر المُطابقة. هذا التابع يُعيد مجموعة العناصر الأصلية لتمكين استخدام سلسلة من الدوال (chaining).
  
 
إليك شيفرة HTML التالية:<syntaxhighlight lang="html">
 
إليك شيفرة HTML التالية:<syntaxhighlight lang="html">
سطر 30: سطر 31:
 
</syntaxhighlight>يمكن إدراج بنية HTML حول عناصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> الداخلية باستخدام <code>‎.wrap()‎</code> مثل:<syntaxhighlight lang="jquery">
 
</syntaxhighlight>يمكن إدراج بنية HTML حول عناصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> الداخلية باستخدام <code>‎.wrap()‎</code> مثل:<syntaxhighlight lang="jquery">
 
$( ".inner" ).wrap( "<div class='new'></div>" );
 
$( ".inner" ).wrap( "<div class='new'></div>" );
−
</syntaxhighlight>يُنشأ عنصر <nowiki><div> الجديد مباشرة ويُضاف إلى DOM. والنتيجة هي </nowiki><code>[[HTML/div|<nowiki><div></nowiki>]]</code> جديدة ملفوفة حول كل عنصر مُطابق:<syntaxhighlight lang="html">
+
</syntaxhighlight>يُنشأ عنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> الجديد مباشرة ويُضاف إلى DOM. والنتيجة هي <code>[[HTML/div|<nowiki><div></nowiki>]]</code> جديدة تُغلّف كل عنصر مُطابق:<syntaxhighlight lang="html">
 
<div class="container">
 
<div class="container">
 
   <div class="new">
 
   <div class="new">
سطر 39: سطر 40:
 
   </div>
 
   </div>
 
</div>
 
</div>
−
</syntaxhighlight>يسمح لنا الإصدار الثاني من هذا التابع بتحديد دالة رد نداء بدلاً من ذلك. ستُستدعى دالة رد النداء هذه مرة واحدة لكل عنصر مطابق؛ ويجب أن تُعيد عنصر DOM، أو كائن jQuery، أو مقتطف HTML الذي سيُلف فيه العنصر المقابل. فمثلا:<syntaxhighlight lang="jquery">
+
</syntaxhighlight>يسمح لنا الإصدار الثاني من هذا التابع بتحديد دالة رد نداء بدلاً من ذلك. ستُستدعى دالة رد النداء هذه مرة واحدة لكل عنصر مطابق؛ ويجب أن تُعيد عنصر DOM، أو كائن jQuery، أو مقتطف HTML الذي سيُغلّف فيه العنصر المقابل. فمثلا:<syntaxhighlight lang="jquery">
 
$( ".inner" ).wrap(function() {
 
$( ".inner" ).wrap(function() {
 
   return "<div class='" + $( this ).text() + "'></div>";
 
   return "<div class='" + $( this ).text() + "'></div>";
 
});
 
});
−
</syntaxhighlight>سيؤدي هذا إلى أن يكون لكل عنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> صنف مقابل للنص الذي يلتف عليه:<syntaxhighlight lang="html">
+
</syntaxhighlight>سيؤدي هذا إلى أن يكون لكل عنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> صنف مقابل للنص الذي يغلفه فيه:<syntaxhighlight lang="html">
 
<div class="container">
 
<div class="container">
 
   <div class="مرحبًا">
 
   <div class="مرحبًا">
سطر 55: سطر 56:
  
 
=== أمثلة ===
 
=== أمثلة ===
−
التفاف عنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> جديد حول جميع الفقرات <code>[[HTML/p|<nowiki><p></nowiki>]]</code>.<syntaxhighlight lang="html">
+
التفاف عنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> جديد حول جميع الفقرات <code>[[HTML/p|<nowiki><p></nowiki>]]</code>:<syntaxhighlight lang="html">
 
<!doctype html>
 
<!doctype html>
 
<html lang="en">
 
<html lang="en">
سطر 84: سطر 85:
 
</body>
 
</body>
 
</html>
 
</html>
−
</syntaxhighlight>لف شجرة من الكائنات حديثة الإنشاء حول عناصر <code>[[HTML/span|<nowiki><span></nowiki>]]</code>. لاحظ أن أي شيء بين <code>[[HTML/span|<nowiki><span></nowiki>]]</code> سيُستبعد مثل <code>[[HTML/strong|<nowiki><strong></nowiki>]]</code> (النص الأحمر) في هذا المثال. حتى المساحة البيضاء بين <code>[[HTML/span|<nowiki><span></nowiki>]]</code>استُبعدت. انقر فوق عرض المصدر لمشاهدة html الأصلي.<syntaxhighlight lang="html">
+
</syntaxhighlight>تغليف شجرة من الكائنات حديثة الإنشاء حول عناصر <code>[[HTML/span|<nowiki><span></nowiki>]]</code>. لاحظ أن أي شيء بين <code>[[HTML/span|<nowiki><span></nowiki>]]</code> سيُستبعد مثل <code>[[HTML/strong|<nowiki><strong></nowiki>]]</code> (النص الأحمر) في هذا المثال. حتى المساحة البيضاء بين <code>[[HTML/span|<nowiki><span></nowiki>]]</code>استُبعدت. انقر فوق عرض المصدر لمشاهدة شيفرة HTML الأصلية:<syntaxhighlight lang="html">
 
<!doctype html>
 
<!doctype html>
 
<html lang="en">
 
<html lang="en">
سطر 119: سطر 120:
 
</body>
 
</body>
 
</html>
 
</html>
−
</syntaxhighlight>التفاف عنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> جديد حول جميع الفقرات <code>[[HTML/p|<nowiki><p></nowiki>]]</code>.<syntaxhighlight lang="html">
+
</syntaxhighlight>تغليف عنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> جديد حول جميع الفقرات <code>[[HTML/p|<nowiki><p></nowiki>]]</code>:<syntaxhighlight lang="html">
 
<!doctype html>
 
<!doctype html>
 
<html lang="en">
 
<html lang="en">
سطر 148: سطر 149:
 
</body>
 
</body>
 
</html>
 
</html>
−
</syntaxhighlight>التفاف كائن jQuery من <code>[[HTML/div|<nowiki><div></nowiki>]]</code> مزدوج حول كافة الفقرات <code>[[HTML/p|<nowiki><p></nowiki>]]</code>. لاحظ أنها لا تحرك الكائن ولكنها تستنسخ فقط من أجل الالتفاف حول هدفها.<syntaxhighlight lang="html">
+
</syntaxhighlight>تغليف كائن jQuery من <code>[[HTML/div|<nowiki><div></nowiki>]]</code> مزدوج حول كافة الفقرات <code>[[HTML/p|<nowiki><p></nowiki>]]</code>. لاحظ أنها لا تحرك الكائن ولكنها تستنسخ فقط من أجل التغليف حول هدفها:<syntaxhighlight lang="html">
 
<!doctype html>
 
<!doctype html>
 
<html lang="en">
 
<html lang="en">

المراجعة الحالية بتاريخ 20:29، 23 يونيو 2018

‎.wrap( wrappingElement )‎

القيمة المعادة

يُعيد كائنًا من النوع jQuery.

الوصف

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

‎.wrap( wrappingElement )‎

أُضيف مع الإصدار: 1.0.

wrappingElement

مُحدد أو عنصر أو سلسلة HTML أو كائن jQuery يحدد الشيفرة المراد تغليفها حول العناصر المُطابقة. عند تمرير مجموعة jQuery تحتوي على أكثر من عنصر واحد، أو محدد يتطابق مع أكثر من عنصر واحد، فسيُستخدم العنصر الأول. وهو من النوع Selector أو htmlString أو Element أو jQuery.

‎.wrap( function )‎

أُضيف مع الإصدار: 1.4.

function

دالة على الشكل Function( Integer index ) => String or jQuery.

وهي دالة رد نداء تُعيد محتوى HTML أو كائن jQuery المراد التفافها حول العناصر المطابقة. وهي تستقبل موضع فهرس العنصر في المجموعة كوسيط. داخل الدالة، يشير this إلى العنصر الحالي في المجموعة.

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

إليك شيفرة HTML التالية:

<div class="container">
  <div class="inner">مرحبًا</div>
  <div class="inner">إلى اللقاء</div>
</div>

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

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

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

<div class="container">
  <div class="new">
    <div class="inner">مرحبًا</div>
  </div>
  <div class="new">
    <div class="inner">إلى اللقاء</div>
  </div>
</div>

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

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

سيؤدي هذا إلى أن يكون لكل عنصر <div> صنف مقابل للنص الذي يغلفه فيه:

<div class="container">
  <div class="مرحبًا">
    <div class="inner">مرحبًا</div>
  </div>
  <div class="إلى اللقاء">
    <div class="inner">إلى اللقاء</div>
  </div>
</div>

أمثلة

التفاف عنصر <div> جديد حول جميع الفقرات <p>:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>wrap مثال على التابع</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>مرحبًا</p>
<p>أيها</p>
<p>العالم</p>
 
<script>
$( "p" ).wrap( "<div></div>" );
</script>
 
</body>
</html>

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

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>wrap مثال على التابع</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 نص</span>
<strong>ماذا عن ذلك?</strong>
<span>نص آخر</span>
 
<script>
$( "span" ).wrap( "<div><div><p><em><b></b></em></p></div></div>" );
</script>
 
</body>
</html>

تغليف عنصر <div> جديد حول جميع الفقرات <p>:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>wrap مثال على التابع</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>مرجبًا</p>
<p>أيها</p>
<p>العالم</p>
 
<script>
$( "p" ).wrap( document.createElement( "div" ) );
</script>
 
</body>
</html>

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

<!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>مرحبًا</p>
<p>أيها</p>
<p>العالم</p>
<div class="doublediv"><div></div></div>
 
<script>
$( "p" ).wrap( $( ".doublediv" ) );
</script>
 
</body>
</html>

مصادر

مجلوبة من "https://wiki.hsoub.com/index.php?title=jQuery/wrap&oldid=11126"