jQuery 3.3

.siblings()




jquery

.siblings ([selector]) إرجاع: jQuery

الوصف: احصل على أشقاء كل عنصر في مجموعة العناصر المتطابقة ، التي تمت تصفيتها اختياريًا بواسطة محدد.

  • الإصدار المضاف: 1.0 .siblings ([selector])

    • منتخب
      النوع: Selector
      سلسلة تحتوي على تعبير محدد لمطابقة العناصر.

بالنظر إلى كائن jQuery الذي يمثل مجموعة من عناصر DOM ، تسمح لنا طريقة .siblings() بالبحث من خلال أشقاء هذه العناصر في شجرة DOM وإنشاء كائن jQuery جديد من العناصر المطابقة.

تقبل الطريقة اختيارياً تعبيراً محدداً من النوع نفسه الذي يمكننا تمريره إلى الدالة $() . إذا تم توفير المحدد ، فسيتم تصفية العناصر عن طريق اختبار ما إذا كانت مطابقة لها.

فكر في صفحة بها قائمة بسيطة عليها:

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li class="third-item">list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

إذا بدأنا في البند الثالث ، يمكننا أن نجد أشقائه:

$( "li.third-item" ).siblings().css( "background-color", "red" );

نتيجة هذه المكالمة هي خلفية حمراء خلف البنود 1 و 2 و 4 و 5. وبما أننا لا نورد تعبير محدد ، فإن جميع الأشقاء هم جزء من الكائن. إذا قمنا بتزويد واحد ، سيتم تضمين العناصر المطابقة فقط بين هذه الأربعة.

لا يتم تضمين العنصر الأصلي بين الأشقاء ، وهو أمر مهم تذكر عندما نرغب في العثور على جميع العناصر على مستوى معين من شجرة DOM. ومع ذلك ، إذا كانت المجموعة الأصلية تحتوي على أكثر من عنصر واحد ، فقد يكونوا أشقاء متبادلين وسيتم العثور على كليهما. إذا كنت تحتاج إلى قائمة حصرية من الأشقاء ، فاستخدم $collection.siblings().not($collection) .

أمثلة:

ابحث عن الأشقاء الفريدة لجميع عناصر الصفراء في القوائم الثلاث (بما في ذلك عناصر الصف الأصفر الأخرى إذا كان ذلك مناسبًا).

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>siblings demo</title>
  <style>
  ul {
    float: left;
    margin: 5px;
    font-size: 16px;
    font-weight: bold;
  }
  p {
    color: blue;
    margin: 10px 20px;
    font-size: 16px;
    padding: 5px;
    font-weight: bolder;
  }
  .hilite {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<ul>
  <li>One</li>
  <li>Two</li>
  <li class="hilite">Three</li>
  <li>Four</li>
</ul>
 
<ul>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
</ul>
 
<ul>
  <li>Eight</li>
  <li class="hilite">Nine</li>
  <li>Ten</li>
  <li class="hilite">Eleven</li>
</ul>
 
<p>Unique siblings: <b></b></p>
 
<script>
var len = $( ".hilite" ).siblings()
  .css( "color", "red" )
  .length;
$( "b" ).text( len );
</script>
 
</body>
</html>

عرض:

البحث عن جميع الأشقاء مع فئة "مختارة" من كل شعبة.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>siblings demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div><span>Hello</span></div>
<p class="selected">Hello Again</p>
<p>And Again</p>
 
<script>
$( "p" ).siblings( ".selected" ).css( "background", "yellow" );
</script>
 
</body>
</html>

عرض: