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

من موسوعة حسوب
اذهب إلى: تصفح، ابحث

المحدد ‎: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>

مصادر