الفرق بين المراجعتين ل"jQuery/wrapAll"
< jQuery
اذهب إلى التنقل
اذهب إلى البحث
Khaled-yassin (نقاش | مساهمات) (أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:التابع <code>.wrapAll()</code>...') |
|||
| سطر 5: | سطر 5: | ||
يُعيد كائنًا من النوع [[jQuery/jQuery|jQuery]]. | يُعيد كائنًا من النوع [[jQuery/jQuery|jQuery]]. | ||
| − | الوصف | + | == الوصف == |
| + | تغليف شيفرة HTML حول جميع العناصر في مجموعة من العناصر المُطابقة. | ||
=== <code>.wrapAll( wrappingElement )</code> === | === <code>.wrapAll( wrappingElement )</code> === | ||
| سطر 11: | سطر 12: | ||
==== <code>wrappingElement</code> ==== | ==== <code>wrappingElement</code> ==== | ||
| − | مُحدد أو عنصر أو سلسلة HTML أو كائن jQuery يحدد الهيكل المراد التفافه حول العناصر المُطابقة. وهو من النوع Selector أو <nowiki/> | + | مُحدد أو عنصر أو سلسلة HTML أو كائن jQuery يحدد الهيكل المراد التفافه حول العناصر المُطابقة. وهو من النوع Selector أو <nowiki/>htmlString أو Element أو <nowiki/>[[jQuery/jQuery|jQuery]]. |
=== <code>.wrapAll( function )</code> === | === <code>.wrapAll( function )</code> === | ||
| سطر 17: | سطر 18: | ||
==== <code>function</code> ==== | ==== <code>function</code> ==== | ||
| − | دالة على الشكل <nowiki/>[[JavaScript/Function|Function]]( Integer index ) => <nowiki/>[[JavaScript/String|String]] or <nowiki/>[[jQuery/jQuery|jQuery]]. | + | دالة على الشكل <nowiki/><code>[[JavaScript/Function|Function]]( Integer index ) => <nowiki/>[[JavaScript/String|String]] or <nowiki/>[[jQuery/jQuery|jQuery]]</code>. |
وهي دالة رد نداء تُعيد محتوى HTML أو كائن jQuery المراد التفافها حول العناصر المطابقة. داخل الدالة، يشير <code>[[JavaScript/this|this]]</code> إلى العنصر الحالي في المجموعة. قبل jQuery [http://api.jquery.com/category/version/3.0 3.0]، كانت دالة رد النداء تُستدعى بشكل غير صحيح لكل عنصر في المجموعة وتستقبل موضع فهرس العنصر في المجموعة كوسيط. | وهي دالة رد نداء تُعيد محتوى HTML أو كائن jQuery المراد التفافها حول العناصر المطابقة. داخل الدالة، يشير <code>[[JavaScript/this|this]]</code> إلى العنصر الحالي في المجموعة. قبل jQuery [http://api.jquery.com/category/version/3.0 3.0]، كانت دالة رد النداء تُستدعى بشكل غير صحيح لكل عنصر في المجموعة وتستقبل موضع فهرس العنصر في المجموعة كوسيط. | ||
| − | يمكن أن تأخذ الدالة <code>.wrapAll()</code> أي سلسلة أو كائن يمكن تمريره إلى الدالة <code>$()</code> لتحديد بنية DOM. قد تكون هذه البنية متداخلة لعدة مستويات، ولكن يجب أن تحتوي على عنصر عميق واحد فقط. سيتم لف الهيكل حول جميع العناصر في مجموعة العناصر المُطابقة، كمجموعة واحدة. | + | يمكن أن تأخذ الدالة <code>.wrapAll()</code> أي سلسلة أو كائن يمكن تمريره إلى الدالة <code>$()</code> لتحديد بنية DOM. قد تكون هذه البنية متداخلة لعدة مستويات، ولكن يجب أن تحتوي على عنصر عميق (inmost) واحد فقط. سيتم لف الهيكل حول جميع العناصر في مجموعة العناصر المُطابقة، كمجموعة واحدة. |
إليك شيفرة HTML التالية:<syntaxhighlight lang="html"> | إليك شيفرة HTML التالية:<syntaxhighlight lang="html"> | ||
| سطر 30: | سطر 31: | ||
</syntaxhighlight>يمكن إدراج بنية HTML حول عناصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> الداخلية باستخدام <code>.wrapAll()</code> مثل:<syntaxhighlight lang="jquery"> | </syntaxhighlight>يمكن إدراج بنية HTML حول عناصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> الداخلية باستخدام <code>.wrapAll()</code> مثل:<syntaxhighlight lang="jquery"> | ||
$( ".inner" ).wrapAll( "<div class='new' />"); | $( ".inner" ).wrapAll( "<div class='new' />"); | ||
| − | </syntaxhighlight>يُنشأ عنصر <nowiki><div> الجديد مباشرة ويُضاف إلى DOM. والنتيجة هي | + | </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"> | ||
| سطر 40: | سطر 41: | ||
=== أمثلة === | === أمثلة === | ||
| − | + | تغليف عنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> جديد حول جميع الفقرات [[HTML/p|<code><nowiki><p></nowiki></code>]]:<syntaxhighlight lang="html"> | |
<!doctype html> | <!doctype html> | ||
<html lang="en"> | <html lang="en"> | ||
| سطر 69: | سطر 70: | ||
</body> | </body> | ||
</html> | </html> | ||
| − | </syntaxhighlight> | + | </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"> | ||
| سطر 104: | سطر 105: | ||
</body> | </body> | ||
</html> | </html> | ||
| − | </syntaxhighlight> | + | </syntaxhighlight>تغليف عنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> جديد حول جميع الفقرات [[HTML/p|<code><nowiki><p></nowiki></code>]]:<syntaxhighlight lang="html"> |
<!doctype html> | <!doctype html> | ||
<html lang="en"> | <html lang="en"> | ||
| سطر 133: | سطر 134: | ||
</body> | </body> | ||
</html> | </html> | ||
| − | </syntaxhighlight> | + | </syntaxhighlight>تغليف كائن jQuery من <code>[[HTML/div|<nowiki><div></nowiki>]]</code> مزدوج حول كافة الفقرات [[HTML/p|<code><nowiki><p></nowiki></code>]]. لاحظ أنها لا تحرك الكائن ولكنها تستنسخ فقط من أجل التغليف حول هدفها:<syntaxhighlight lang="html"> |
| − | |||
| − | |||
| − | <syntaxhighlight lang="html"> | ||
<!doctype html> | <!doctype html> | ||
<html lang="en"> | <html lang="en"> | ||
| سطر 173: | سطر 171: | ||
</html> | </html> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| + | == مصادر == | ||
* [http://api.jquery.com/wrap/ صفحة التابع .wrapAll()في توثيق jQuery الرسمي]. | * [http://api.jquery.com/wrap/ صفحة التابع .wrapAll()في توثيق jQuery الرسمي]. | ||
[[تصنيف:jQuery]] | [[تصنيف:jQuery]] | ||
[[تصنيف:jQuery Method]] | [[تصنيف:jQuery Method]] | ||
[[تصنيف:jQuery Manipulation]] | [[تصنيف:jQuery Manipulation]] | ||
المراجعة الحالية بتاريخ 11:33، 23 يونيو 2018
.wrapAll( wrappingElement )
القيمة المعادة
يُعيد كائنًا من النوع jQuery.
الوصف
تغليف شيفرة HTML حول جميع العناصر في مجموعة من العناصر المُطابقة.
.wrapAll( wrappingElement )
أُضيف مع الإصدار: 1.2.
wrappingElement
مُحدد أو عنصر أو سلسلة HTML أو كائن jQuery يحدد الهيكل المراد التفافه حول العناصر المُطابقة. وهو من النوع Selector أو htmlString أو Element أو jQuery.
.wrapAll( function )
أُضيف مع الإصدار: 1.4.
function
دالة على الشكل Function( Integer index ) => String or jQuery.
وهي دالة رد نداء تُعيد محتوى HTML أو كائن jQuery المراد التفافها حول العناصر المطابقة. داخل الدالة، يشير this إلى العنصر الحالي في المجموعة. قبل jQuery 3.0، كانت دالة رد النداء تُستدعى بشكل غير صحيح لكل عنصر في المجموعة وتستقبل موضع فهرس العنصر في المجموعة كوسيط.
يمكن أن تأخذ الدالة .wrapAll() أي سلسلة أو كائن يمكن تمريره إلى الدالة $() لتحديد بنية DOM. قد تكون هذه البنية متداخلة لعدة مستويات، ولكن يجب أن تحتوي على عنصر عميق (inmost) واحد فقط. سيتم لف الهيكل حول جميع العناصر في مجموعة العناصر المُطابقة، كمجموعة واحدة.
إليك شيفرة HTML التالية:
<div class="container">
<div class="inner">مرحبًا</div>
<div class="inner">إلى اللقاء</div>
</div>
يمكن إدراج بنية HTML حول عناصر <div> الداخلية باستخدام .wrapAll() مثل:
$( ".inner" ).wrapAll( "<div class='new' />");
يُنشأ عنصر <div> الجديد مباشرة ويُضاف إلى DOM. والنتيجة هي <div> جديدة مُغلِّفة لجميع العناصر المُطابقة:
<div class="container">
<div class="new">
<div class="inner">مرحبًا</div>
<div class="inner">إلى اللقاء</div>
</div>
</div>
أمثلة
تغليف عنصر <div> جديد حول جميع الفقرات <p>:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>wrapAll مثال على التابع</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" ).wrapAll( "<div></div>" );
</script>
</body>
</html>
تغليف شجرة من الكائنات حديثة الإنشاء حول عناصر <span>. لاحظ أن أي شيء بين <span> سيُستبعد مثل <strong> (النص الأحمر) في هذا المثال. حتى المساحة البيضاء بين <span>استُبعدت. انقر فوق عرض المصدر لمشاهدة شيفرة HTML الأصلية:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>wrapAll مثال على التابع</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").wrapAll( "<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>wrapAll مثال على التابع</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" ).wrapAll( document.createElement( "div" ) );
</script>
</body>
</html>
تغليف كائن jQuery من <div> مزدوج حول كافة الفقرات <p>. لاحظ أنها لا تحرك الكائن ولكنها تستنسخ فقط من أجل التغليف حول هدفها:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>wrapAll مثال على التابع</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" ).wrapAll( $( ".doublediv" ) );
</script>
</body>
</html>