الفرق بين المراجعتين لصفحة: «jQuery/has»

من موسوعة حسوب
هذه الصفحة من مساهمات عدنان أمزيان.
طلا ملخص تعديل
 
سطر 70: سطر 70:
* [http://api.jquery.com/has/ صفحة التابع ‎.has()‎ في توثيق jQuery الرسمي.]
* [http://api.jquery.com/has/ صفحة التابع ‎.has()‎ في توثيق jQuery الرسمي.]
[[تصنيف:jQuery]]
[[تصنيف:jQuery]]
[[تصنيف:jQuery Miscellaneous]]
[[تصنيف:jQuery Traversing]]

المراجعة الحالية بتاريخ 23:10، 28 مايو 2018

‎.has(selector)‎

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

يُعيد كائنًا من النوع jQuery.

الوصف

يختار هذا التابع من العناصر التي حُدِّدَت مسبقًا العناصرَ السليلة منها التي تحقق الشروط المطلوبة في المحددات أو تطابق عنصر DOM.

‎.has( selector )‎

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

selector

سلسلة نصية من الكائن String، وتحتوي على تعبير المحدد لمطابقة عناصر معينة.

‎.has( contained )‎

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

contained

عنصر، وهو عنصر من شجرة DOM لاختيار الأب الذي يضمه.

لنفترض أنه لدينا كائن jQuery والذي يمثل مجموعة من عناصر DOM، فسينشئ التابع ‎.has()‎ كائن jQuery جديد يحتوي على مجموعة فرعية من المجموعة الأولى، والتي تحتوي على عناصر من المجموعة الأولى التي تُطابِق العناصر السليلة منها الشرط المُمرَّر إلى هذا التابع.

نأخذ مثالًا لصفحة تحتوي على قائمة غير مرتبة <ul> متشعبة (أي يوجد عنصر <ul> داخل عنصر <li>):

<ul>
  <li>list item 1</li>
  <li>list item 2
	<ul>
      <li>list item 2-a</li>
      <li>list item 2-b</li>
	</ul>
  </li>
  <li>list item 3</li>
  <li>list item 4</li>
</ul>

يمكننا تطبيق التابع ()has. على العناصر <li> الموجودة في الصفحة مثل:

$( "li" ).has( "ul" ).css( "background-color", "red" );

ستكون نتيجة تشغيل هذه الشيفرة تلوينَ خلفية العنصر item 2 باللون الأحمر لأنه العنصر <li> الوحيد الذي له عنصر <ul> من بين العناصر السليلة.

أمثلة

التحقق إن كان العنصر موجودًا ضمن عنصر آخر:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>has demo</title>
  <style>
  .full {
	border: 1px solid red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<ul><li>Does the UL contain an LI?</li></ul>
 
<script>
$( "ul" ).append( "<li>" +
  ( $( "ul" ).has( "li" ).length ? "Yes" : "No" ) +
  "</li>" );
$( "ul" ).has( "li" ).addClass( "full" );
</script>
 
</body>
</html>

مصادر