jQuery 3.3

.addClass()




jquery

.addClass (اسم الفئة) إرجاع: jQuery

الوصف: يضيف الفئة (الفئات) المحددة لكل عنصر في مجموعة العناصر المتطابقة.

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

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

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

من المهم ملاحظة أن هذه الطريقة لا تحل محل الفصل الدراسي. إنه يضيف الطبقة ببساطة ، ويضيفها إلى أي فئة قد يتم تعيينها بالفعل للعناصر.

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

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

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

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

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

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

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

اعتبارًا من jQuery 1.4 ، يمكن .addClass() الأسلوب .addClass() تلقي دالة.

$( "ul li" ).addClass(function( index ) {
  return "item-" + index;
});

وبالنظر إلى قائمة غير مرتبة تحتوي على عنصرين <li> ، يضيف هذا المثال الفئة "item-0" إلى أول <li> و "item-1" إلى الثانية.

أمثلة:

أضف الصف "محدد" إلى العناصر المتطابقة.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>addClass demo</title>
  <style>
  p {
    margin: 8px;
    font-size: 16px;
  }
  .selected {
    color: blue;
  }
  .highlight {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
 
<script>
$( "p" ).last().addClass( "selected" );
</script>
 
</body>
</html>

عرض:

أضف الفئات "المحددة" و "تمييز" إلى العناصر المتطابقة.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>addClass demo</title>
  <style>
  p {
    margin: 8px;
    font-size: 16px;
  }
  .selected {
    color: red;
  }
  .highlight {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
 
<script>
$( "p:last" ).addClass( "selected highlight" );
</script>
 
</body>
</html>

عرض:

تمرير في دالة إلى .addClass() لإضافة فئة "الأخضر" إلى div يحتوي بالفعل على فئة "أحمر".

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>addClass demo</title>
  <style>
  div {
    background: white;
  }
  .red {
    background: red;
  }
  .red.green {
    background: green;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
 <div>This div should be white</div>
 <div class="red">This div will be green because it now has the "green" and "red" classes.
   It would be red if the addClass function failed.</div>
 <div>This div should be white</div>
 <p>There are zero green divs</p>
 
<script>
$( "div" ).addClass(function( index, currentClass ) {
  var addedClass;
 
  if ( currentClass === "red" ) {
    addedClass = "green";
    $( "p" ).text( "There is one green div" );
  }
 
  return addedClass;
});
</script>
 
</body>
</html>

عرض: