jQuery 3.3

.nextAll()




jquery

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

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

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

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

بالنظر إلى كائن jQuery الذي يمثل مجموعة من عناصر DOM ، تسمح لنا طريقة .nextAll() بالبحث من خلال خلفاء هذه العناصر في شجرة 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" ).nextAll().css( "background-color", "red" );

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

أمثلة:

حدد موقع جميع divs بعد الأول ومنحهم فئة.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>nextAll demo</title>
  <style>
  div {
    width: 80px;
    height: 80px;
    background: #abc;
    border: 2px solid black;
    margin: 10px;
    float: left;
  }
  div.after {
    border-color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div>first</div>
<div>sibling<div>child</div></div>
<div>sibling</div>
<div>sibling</div>
<script>
$( "div:first" ).nextAll().addClass( "after" );
</script>
 
</body>
</html>

عرض:

حدد موقع كل الفقرات بعد الطفل الثاني في الجسم واعطهم فئة.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>nextAll demo</title>
  <style>
  div, p {
    width: 60px;
    height: 60px;
    background: #abc;
    border: 2px solid black;
    margin: 10px;
    float: left;
  }
  .after {
    border-color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>p</p>
<div>div</div>
<p>p</p>
<p>p</p>
<div>div</div>
<p>p</p>
<div>div</div>
 
<script>
$( ":nth-child(1)" ).nextAll( "p" ).addClass( "after" );
</script>
 
</body>
</html>

عرض: