الفرق بين المراجعتين لصفحة: «jQuery/wrapInner»
< jQuery
Khaled-yassin (نقاش | مساهمات) أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:التابع <code>.wrapInner()</code>...' |
لا ملخص تعديل |
||
| سطر 18: | سطر 18: | ||
أُضيف مع الإصدار: [http://api.jquery.com/category/version/1.4 1.4]. | أُضيف مع الإصدار: [http://api.jquery.com/category/version/1.4 1.4]. | ||
==== function ==== | ==== <code>function</code> ==== | ||
دالة على الشكل [[JavaScript/Function/call|Function]]( Integer index ) => [[JavaScript/String|String]]. | دالة على الشكل <code>[[JavaScript/Function/call|Function]]( Integer index ) => [[JavaScript/String|String]]</code>. | ||
وهي دالة رد نداء تُنشئ شيفرة HTML لتغليف محتوى العناصر المُطابقة. وهي تستقبل موضع فهرس العنصر في المجموعة كوسيط. داخل الدالة، يشير <code>[[JavaScript/this|this]]</code> إلى العنصر الحالي في المجموعة. | وهي دالة رد نداء تُنشئ شيفرة HTML لتغليف محتوى العناصر المُطابقة. وهي تستقبل موضع فهرس العنصر في المجموعة كوسيط. داخل الدالة، يشير <code>[[JavaScript/this|this]]</code> إلى العنصر الحالي في المجموعة. | ||
| سطر 32: | سطر 32: | ||
</syntaxhighlight>يمكن باستخدام <code>.wrapInner()</code> إدراج بنية HTML حول محتوى كل عناصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> الداخلية مثل:<syntaxhighlight lang="jquery"> | </syntaxhighlight>يمكن باستخدام <code>.wrapInner()</code> إدراج بنية HTML حول محتوى كل عناصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> الداخلية مثل:<syntaxhighlight lang="jquery"> | ||
$( ".inner" ).wrapInner( "<div class='new'></div>"); | $( ".inner" ).wrapInner( "<div class='new'></div>"); | ||
</syntaxhighlight>يُنشأ عنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> الجديد مباشرة ويُضاف إلى DOM. والنتيجة هي <code>[[HTML/div|<nowiki><div></nowiki>]]</code> | </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="inner"> | <div class="inner"> | ||
| سطر 41: | سطر 41: | ||
</div> | </div> | ||
</div> | </div> | ||
</syntaxhighlight>يسمح لنا الإصدار الثاني من هذا التابع بتحديد دالة رد نداء بدلاً من ذلك. ستُستدعى دالة رد النداء هذه مرة واحدة لكل عنصر مطابق؛ ويجب أن تُعيد عنصر DOM، أو كائن jQuery، أو مقتطف HTML الذي سيُغلّف فيه العنصر المقابل. | </syntaxhighlight>يسمح لنا الإصدار الثاني من هذا التابع بتحديد دالة رد نداء بدلاً من ذلك. ستُستدعى دالة رد النداء هذه مرة واحدة لكل عنصر مطابق؛ ويجب أن تُعيد عنصر DOM، أو كائن jQuery، أو مقتطف HTML الذي سيُغلّف فيه العنصر المقابل. فمثلاً:<syntaxhighlight lang="jquery"> | ||
$( ".inner" ).wrapInner(function() { | $( ".inner" ).wrapInner(function() { | ||
return "<div class='" + this.nodeValue + "'></div>"; | return "<div class='" + this.nodeValue + "'></div>"; | ||
| سطر 60: | سطر 60: | ||
=== أمثلة === | === أمثلة === | ||
تحديد كل الفقرات <code>[[HTML/p|<nowiki><p></nowiki>]]</code> وتغليف كل محتوياتها | تحديد كل الفقرات <code>[[HTML/p|<nowiki><p></nowiki>]]</code> وتغليف كل محتوياتها بالعنصر <code>[[HTML/b|<nowiki><b></nowiki>]]</code>:<syntaxhighlight lang="html"> | ||
<!doctype html> | <!doctype html> | ||
<html lang="en"> | <html lang="en"> | ||
| سطر 85: | سطر 85: | ||
</body> | </body> | ||
</html> | </html> | ||
</syntaxhighlight>التغليف بشجرة من الكائنات حديثة الإنشاء حول محتوى <code>[[HTML/body|<body>]]</code> | </syntaxhighlight>التغليف بشجرة من الكائنات حديثة الإنشاء حول محتوى العنصر <code>[[HTML/body|<body>]]</code>:<syntaxhighlight lang="html"> | ||
<!doctype html> | <!doctype html> | ||
<html lang="en"> | <html lang="en"> | ||
| سطر 115: | سطر 115: | ||
</body> | </body> | ||
</html> | </html> | ||
</syntaxhighlight>تحديد كل الفقرات <code>[[HTML/p|<nowiki><p></nowiki>]]</code> وتغليف كل محتوياتها | </syntaxhighlight>تحديد كل الفقرات <code>[[HTML/p|<nowiki><p></nowiki>]]</code> وتغليف كل محتوياتها بالعنصر <code>[[HTML/b|<nowiki><b></nowiki>]]</code>:<syntaxhighlight lang="html"> | ||
<!doctype html> | <!doctype html> | ||
<html lang="en"> | <html lang="en"> | ||
| سطر 140: | سطر 140: | ||
</body> | </body> | ||
</html> | </html> | ||
</syntaxhighlight>تحديد كل الفقرات <code>[[HTML/p|<nowiki><p></nowiki>]]</code> وتغليف محتوياتها بكائن jQuery | </syntaxhighlight>تحديد كل الفقرات <code>[[HTML/p|<nowiki><p></nowiki>]]</code> وتغليف محتوياتها بكائن jQuery:<syntaxhighlight lang="html"> | ||
<!doctype html> | <!doctype html> | ||
<html lang="en"> | <html lang="en"> | ||
المراجعة الحالية بتاريخ 10:49، 24 يونيو 2018
.wrapInner( wrappingElement )
القيمة المعادة
يُعيد كائنًا من النوع jQuery.
الوصف
تغليف شيفرة HTML حول محتوى كل عنصر في مجموعة العناصر المُطابقة.
.wrapInner( wrappingElement )
أُضيف مع الإصدار: 1.2.
wrappingElement
شيفرة HTML أو تعبير مُحدد أو كائن jQuery أو عنصر DOM يحدد شيفرة تغليف محتوى العناصر المُطابقة. وهو من النوع Selector أو htmlString أو Element أو jQuery.
.wrapInner( function )
أُضيف مع الإصدار: 1.4.
function
دالة على الشكل Function( Integer index ) => String.
وهي دالة رد نداء تُنشئ شيفرة HTML لتغليف محتوى العناصر المُطابقة. وهي تستقبل موضع فهرس العنصر في المجموعة كوسيط. داخل الدالة، يشير this إلى العنصر الحالي في المجموعة.
يمكن أن تأخذ الدالة .wrapInner() أي سلسلة أو كائن يمكن تمريره إلى الدالة $() لتحديد بنية DOM. قد تكون هذه البنية متداخلة لعدة مستويات، ولكن يجب أن تحتوي على عنصر عميق (inmost) واحد فقط. ستُغلّف شيفرة HTML محتوى كل عنصر في مجموعة العناصر المُطابقة.
إليك شيفرة HTML التالية:
<div class="container">
<div class="inner">مرحبًا</div>
<div class="inner">إلى اللقاء</div>
</div>
يمكن باستخدام .wrapInner() إدراج بنية HTML حول محتوى كل عناصر <div> الداخلية مثل:
$( ".inner" ).wrapInner( "<div class='new'></div>");
يُنشأ عنصر <div> الجديد مباشرة ويُضاف إلى DOM. والنتيجة هي عنصر <div> جديد يُغلّف كل عنصر مُطابق:
<div class="container">
<div class="inner">
<div class="new">مرحبًا</div>
</div>
<div class="inner">
<div class="new">إلى اللقاء</div>
</div>
</div>
يسمح لنا الإصدار الثاني من هذا التابع بتحديد دالة رد نداء بدلاً من ذلك. ستُستدعى دالة رد النداء هذه مرة واحدة لكل عنصر مطابق؛ ويجب أن تُعيد عنصر DOM، أو كائن jQuery، أو مقتطف HTML الذي سيُغلّف فيه العنصر المقابل. فمثلاً:
$( ".inner" ).wrapInner(function() {
return "<div class='" + this.nodeValue + "'></div>";
});
سيؤدي هذا إلى أن يكون لكل عنصر <div> صنف مقابل للنص الذي يغلفه فيه:
<div class="container">
<div class="inner">
<div class="مرحبًا">مرحبًا</div>
</div>
<div class="inner">
<div class="إلى اللقاء">إلى اللقاء</div>
</div>
</div>
ملاحظة: عند تمرير سلسلة محدد إلى دالة .wrapInner()، فإن المدخلات المتوقعة تكون شيفرة HTML منضبطة مع وسوم إغلاق صحيحة. الأمثلة على الإدخال الصحيح تتضمن:
$( elem ).wrapInner( "<div class='test'></div>" );
$( elem ).wrapInner( "<div class=\"test\"></div>" );
أمثلة
تحديد كل الفقرات <p> وتغليف كل محتوياتها بالعنصر <b>:
<!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>
التغليف بشجرة من الكائنات حديثة الإنشاء حول محتوى العنصر <body>:
<!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>
تحديد كل الفقرات <p> وتغليف كل محتوياتها بالعنصر <b>:
<!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>
تحديد كل الفقرات <p> وتغليف محتوياتها بكائن jQuery:
<!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>