التابع .removeClass() في jQuery
.removeClass( [className ] )
القيم المعادة
يعيد كائنًا من النوع jQuery.
الوصف
يحذف هذا التابع صنفًا واحدًا، أو عدَّة أصناف، أو جميع الأصناف من كل عنصر في مجموعة العناصر المطابقة.
.removeClass( [className ] )
أُضيف مع الإصدار: 1.0.
className
سلسلة نصيَّة تمثِّل اسم صنفٍ واحدٍ أو عدَّة أصناف مفصولة بمسافة يراد حذفها من الخاصِّيَّة class لكل عنصر مطابق.
.removeClass( function )
أُضيف مع الإصدار: 1.4.
function
دالة من الشكل Function( Integer index, String className ) والتي تعيد سلسلة نصية تمثِّل اسم صنفٍ واحدٍ أو عدَّة أصناف مفصولة بمسافة يراد حذفها. الوسائط التي يقبل هذا التابع أن تمرَّر إليه هي: فهرس موقع العنصر في المجموعة، قيمة الخاصِّيَّة class القديمة.
إن أُعطي اسم صنفٍ محدَّدٍ للتابع، فسيُحذَف ذلك الصنف بالتحديد فقط من كل عنصر في مجموعة العناصر المطابقة. إن لم يمرَّر أيَّ اسم لصنف، فستُحذف حينئذٍ جميع الأصناف.
كان بإمكان التابع .removeClass() قبل الإصدار jQuery 1.12/2.2 تعديل الخاصِّيَّة الكائنيَّة className (أي property) الممرَّرة إليه للعنصر المحدَّد، وليس خاصِّيَّة class HTML (أي attribute). عندما تتغير الخاصِّيَّة الكائنيَّة، يُحدِّث المتصفح خاصِّيَّة HTML وفقًا لذلك. هذا يعني أنَّه عندما تُحدَّث خاصِّيَّة class HTML ويُحذَف آخر اسم للصنف، فقد يضبط المتصفح قيمة خاصِّيَّة HTML إلى سلسلة نصيِّة فارغة بدلًا من حذف الخاصِّيَّة كليًّا. تضمين هذا السلوك كان بسبب أن هذا التابع يعمل فقط في صفحات HTML DOM وليس في صفحات XML الصرفة مثلًا.
ابتداءً من الإصدار jQuery 1.12/2.2، تغير هذا السلوك من أجل توفير دعم لمستندات XML، ومن ضمنها SVG، وأصبحت خاصِّيَّة class HTML هي المستخدمة عوضًا عن الخاصِّيَّة الكائنيِّة. بناءً على ذلك، أصبح بالإمكان استعمال التابع .removeClass() مع مستندات XML أو SVG.
يمكن حذف عدَّة أصناف في الوقت ذاته من مجموعة العناصر المطابقة وذلك بفصل أسماء الأصناف بمسافة فارغة مثل:
$( "p" ).removeClass( "myClass yourClass" )
يُستعمَل هذا التابع غالبًا مع التابع .addClass() لتبديل أصناف العناصر بين بعضها بعضًا مثل:
$( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );
حذفنا في الصنف myClass والصنف noClass من جميع الفقرات وأضفنا مكانها الصنف yourClass.
لتبديل أصناف محدَّدة مكان جميع الأصناف الموجودة، يمكننا استعمال .attr( "class", "newClass" ) عوضًا عما سبق.
بدءًا من الإصدار jQuery، أصبح بالإمكان الإشارة إلى الصنف المراد حذفه بتمرير دالةٍ إلى التابع .removeClass().
$( "li:last" ).removeClass(function() {
return $( this ).prev().attr( "class" );
});
في هذا المثال، سيُحذف اسم الصنف للعنصر <li> قبل الأخير.
أمثلة
حذف الصنف "blue" من جميع العناصر المطابقة:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>removeClass مثالٌ عن استعمال التابع</title>
<style>
p {
margin: 4px;
font-size: 16px;
font-weight: bolder;
}
.blue {
color: blue;
}
.under {
text-decoration: underline;
}
.highlight {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p class="blue under">مرحبًا</p>
<p class="blue under highlight">ثم</p>
<p class="blue under">وداعًا</p>
<p class="blue under">وإلى اللقاء</p>
<script>
$( "p:even" ).removeClass( "blue" );
</script>
</body>
</html>
حذف الصنف "blue" والصنف "under" من العناصر المطابقة:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>removeClass مثالٌ عن استعمال التابع</title>
<style>
p {
margin: 4px;
font-size: 16px;
font-weight: bolder;
}
.blue {
color: blue;
}
.under {
text-decoration: underline;
}
.highlight {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p class="blue under">مرحبًا</p>
<p class="blue under highlight">ثم</p>
<p class="blue under">وداعًا</p>
<p class="blue under">وإلى اللقاء</p>
<script>
$( "p:odd" ).removeClass( "blue under" );
</script>
</body>
</html>
حذف جميع الأصناف من العناصر المطابقة:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>removeClass مثالٌ عن استعمال التابع</title>
<style>
p {
margin: 4px;
font-size: 16px;
font-weight: bolder;
}
.blue {
color: blue;
}
.under {
text-decoration: underline;
}
.highlight {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p class="blue under">مرحبًا</p>
<p class="blue under highlight">ثم</p>
<p class="blue under">وداعًا</p>
<p class="blue under">وإلى اللقاء</p>
<script>
$( "p:eq(1)" ).removeClass();
</script>
</body>
</html>