jQuery 3.3

.removeClass()




jquery

.removeClass ([className]) الإرجاع: jQuery

الوصف: قم بإزالة فئة واحدة أو فئات متعددة أو كل الفئات من كل عنصر في مجموعة العناصر المتطابقة.

  • الإصدار المضاف: 1.0 .removeClass ([className])

    • اسم_الفئة
      اكتب: String
      هناك فصل واحد أو أكثر مفصول في الفضاء ليتم إزالته من صفة class لكل عنصر متطابق.
  • الإصدار المضافة: 1.4 .removeClass (وظيفة)

    • وظيفة
      النوع: Function (فهرس Integer ، الفئة className) => String
      دالة تقوم بإرجاع واحد أو أكثر من أسماء الفئات المفصولة بمسافة يمكن إزالتها. يستقبل موضع فهرس العنصر في المجموعة وقيمة الفئة القديمة كوسيطة.

إذا تم تضمين اسم الفئة كمعلمة ، فسيتم فقط إزالة الفئة من مجموعة العناصر المتطابقة. إذا لم يتم تحديد أسماء الفئات في المعلمة ، فستتم إزالة جميع الفئات.

قبل jQuery الإصدار 1.12 / 2.2 ، .removeClass() أسلوب .removeClass() للعناصر المحددة ، وليس سمة class . بمجرد تغيير الخاصية ، كان المتصفح هو الذي قام بتحديث السمة وفقًا لذلك. وهذا يعني أنه عندما يتم تحديث سمة الفئة وتمت إزالة اسم الفئة الأخير ، فقد يكون المتصفح قد عيّن قيمة السمة إلى سلسلة فارغة بدلاً من إزالة السمة تمامًا. كان أحد الآثار المترتبة على هذا السلوك أن هذه الطريقة لا تعمل إلا مع المستندات ذات دلالات HTML DOM (على سبيل المثال ، ليست مستندات XML خالصة).

بدءًا من jQuery 1.12 / 2.2 ، يتم تغيير هذا السلوك لتحسين دعم مستندات XML ، بما في ذلك SVG. بدءًا من هذا الإصدار ، يتم استخدام سمة class بدلاً من ذلك. لذلك ، يمكن استخدام .removeClass() على مستندات XML أو SVG.

قد تتم إزالة أكثر من فئة واحدة في كل مرة ، مفصولة بمسافة ، من مجموعة العناصر المتطابقة ، مثل:

$( "p" ).removeClass( "myClass yourClass" )

غالبًا ما يتم استخدام هذه الطريقة مع .addClass() لتبديل فئات العناصر من واحدة إلى أخرى ، مثل:

$( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );

هنا ، تتم إزالة فئتي noClass و noClass من جميع الفقرات ، بينما تتم إضافة yourClass .

لاستبدال جميع الفئات الموجودة بفئة أخرى ، يمكننا استخدام .attr( "class", "newClass" ) بدلاً من ذلك.

اعتبارًا من jQuery 1.4 ، تسمح لنا طريقة .removeClass() إلى الفصل المراد إزالته بتمريره في إحدى الوظائف.

$( "li:last" ).removeClass(function() {
  return $( this ).prev().attr( "class" );
});

يقوم هذا المثال بإزالة اسم الفئة قبل الأخيرة من <li> من آخر <li> .

أمثلة:

أزل الصف "الأزرق" من العناصر المتطابقة.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>removeClass demo</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">Hello</p>
<p class="blue under highlight">and</p>
<p class="blue under">then</p>
<p class="blue under">Goodbye</p>
 
<script>
$( "p:even" ).removeClass( "blue" );
</script>
 
</body>
</html>

عرض:

أزل الصف "أزرق" و "تحت" من العناصر المتطابقة.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>removeClass demo</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">Hello</p>
<p class="blue under highlight">and</p>
<p class="blue under">then</p>
<p class="blue under">Goodbye</p>
 
<script>
$( "p:odd" ).removeClass( "blue under" );
</script>
 
</body>
</html>

عرض:

أزل جميع الفئات من العناصر المتطابقة.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>removeClass demo</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">Hello</p>
<p class="blue under highlight">and</p>
<p class="blue under">then</p>
<p class="blue under">Goodbye</p>
 
<script>
$( "p:eq(1)" ).removeClass();
</script>
 
</body>
</html>

عرض: