التابع .wrapInner() في jQuery
.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>