التابع ‎.hasClass()‎‎ في jQuery

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

‎.hasClass( className )‎

القيم المعادة

يعيد قيمة منطقية Boolean.

الوصف

حدد إن كانت العناصر التي اختيرت سابقًا تمتلك صنفًا معينًا أم لا.

‎.hasClass( className )‎

أُضيف مع الإصدار: 1.2.

className

سلسلة نصية تمثل اسم الصنف المراد البحث عنه.

يمكن إسناد أكثر من صنف إلى العناصر. نعبر عن هذا في HTML بفصل أسماء الأصناف بمسافة فارغة:

<div id="mydiv" class="foo bar"></div>

سيعيد التابع ‎.hasClass()‎ القيمة true إذا كان الصنف المبحوث عنه مسندًا إلى العنصر المحدد حتى إن كان هذا العنصر يمتلك أصنافًا أخرى. إذا طبقنا الشيفرة التالية مثلًا على عنصر HTML السابق، فسيعيد التابع القيمة true:

$( "#mydiv" ).hasClass( "foo" )

كما سيعيد true في الشيفرة الآتية:

$( "#mydiv" ).hasClass( "bar" )

بينما ستُعاد القيمة false في الشيفرة التالية:

$( "#mydiv" ).hasClass( "quux" )

أصبح هذا التابع يدعم صفحات XML بدءًا من إصدار jQuery 1.12/2.2 بما فيها SVG.

أمثلة

البحث عن الفقرة <p> التي تحتوي على الصنف "selected":

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hasClass demo</title>
  <style>
  p {
	margin: 8px;
	font-size: 16px;
  }
  .selected {
	color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>This paragraph is black and is the first paragraph.</p>
<p class="selected">This paragraph is red and is the second paragraph.</p>
<div id="result1">First paragraph has selected class: </div>
<div id="result2">Second paragraph has selected class: </div>
<div id="result3">At least one paragraph has selected class: </div>
<script>
$( "#result1" ).append( $( "p:first" ).hasClass( "selected" ).toString() );
$( "#result2" ).append( $( "p:last" ).hasClass( "selected" ).toString() );
$( "#result3" ).append( $( "p" ).hasClass( "selected" ).toString() ) ;
</script>
</body>
</html>

مصادر