محدد العناصر الأخوة `‎‎("prev ~ siblings")`‎ في jQuery

محدد العناصر الأخوة next siblings selector

الوصف

يختار هذا المحدِّد جميع العناصر الأخوة التي يسبقها العنصر "prev"، وتشترك معه بالعنصر الأب نفسه، وتطابق محدِّد الترشيح "siblings".

`jQuery( "prev ~ siblings" )‎`

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

`prev`

أي محدِّد صحيح.

`siblings`

محدِّد لترشيح العناصر الأخوة التي تلي العنصر المعطى في المحدِّد الأول prev.

الفارق الأساسي بين محدد العناصر الأخوة المتجاورة prev + next ومحدد العناصر الأخوة prev ~ siblings هو الوصول الخاص بكل منهما إلى العناصر. فالأول يصل إلى العنصر الأخ الذي يلي العنصر مباشرةً فقط، بينما يوسِّع الأخير مجاله ليصل إلى جميع العناصر الأخوة التي تلي ذلك العنصر.

أمثلة

إيجاد جميع العناصر <div> الأخوة التي تأتي بعد العنصر ذي المعرف "prev". لاحظ أنَّ العنصر <span> لم يُحدَّد لأنه ليس من النوع <div>، والعنصر "niece" لم يحدَّد أيضًا لأنَّه عنصر ابن للعنصر الأخ:

<!doctype html>
<html lang="ar">
<head>
  <meta charset="utf-8">
  <title>مثالٌ عن محدد العناصر الأخوة</title>
  <style>
  div, span {
    display: block;
    width: 90px;
    height: 100px;
    margin: 5px;
    background: #bfa;
    float: left;
    font-size: 14px;
  }
  div#small {
    width: 60px;
    height: 50px;
    font-size: 12px;
    background: #fab;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div>العنصر div (لا يتطابق لأنه قبل العنصر span#prev)</div>
<span id="prev">العنصر span#prev</span>
<div>العنصر div (أحد العناصر الأخوة)</div>
<div>العنصر div (أحد العناصر الأخوة)<div id="small">العنصر div (عنصر ابن للعنصر الأخ)</div></div>
<span>العنصر span (ليس من النوع div وأحد العناصر الأخوة)</span>
<div>العنصر div (أحد العناصر الأخوة)</div>
 
<script>
$( "#prev ~ div" ).css( "border", "3px groove blue" );
</script>
 
</body>
</html>

مصادر

صفحة المحدِّد next siblings في توثيق jQuery الرسمي.