المحدد ‎‎‎:only-of-type‎ في jQuery

من موسوعة حسوب
مراجعة 17:41، 13 يونيو 2018 بواسطة جميل-بيلوني (نقاش | مساهمات) (إضافة محتويات الصفحة.)
(فرق) → مراجعة أقدم | المراجعة الحالية (فرق) | مراجعة أحدث ← (فرق)

المحدد ‎:only-of-type

الوصف

يختار هذا المحدِّد جميع العناصر التي تكون ابنًا وحيدًا للعنصر الأب (أي العنصر الذي ليس لديه أية عناصر إخوة) وتملك اسم  ذلك العنصر نفسه.

jQuery( ":only-child" )‎

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

إن كان للعنصر الأب عنصر ابن آخر (عنصرين أو أكثر) من نفس الاسم، فلن يتطابق أي عنصر.

أمثلة

تغيير نص وشكل إطار كل زر يكون عنصرًا وحيدًا ضمن العنصر الأب ومن النوع نفسه:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>only-of-type مثالٌ عن استعمال المحدد</title>
  <style>
  div {
    width: 100px;
    height: 80px;
    margin: 5px;
    float: left;
    background: #b9e;
  }
  span {
    padding: 2px;
    margin: 3px;
    line-height: 1.4;
    border: 1px solid #000;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div>
  <button>عنصر أخ</button>
  <button>عنصر أخ</button>
</div>
 
<div>
  <button>عنصر أخ</button>
</div>
<div>
  None
</div>
 
<div>
  <button>عنصر أخ</button>
  <span>عنصر أخ</span>
  <span>عنصر أخ</span>
</div>
 
<div>
  <button>عنصر أخ</button>
</div>
 
<script>
  $( "button:only-of-type" ).text( "عنصر وحيد" ).css( "border", "2px blue solid" );
</script>
 
</body>
</html>

مصادر