عرض مصدر jQuery/next siblings selector

<noinclude>{{DISPLAYTITLE:محدد العناصر الأخوة <code>‎‎("prev ~ siblings")</code>‎ في jQuery}}</noinclude>
[[تصنيف:jQuery]]
[[تصنيف:jQuery Selectors]]
== محدد العناصر الأخوة next siblings selector ==

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

=== <code>jQuery( "prev ~ siblings" )‎</code> ===
أُضيف مع الإصدار: 1.0.

==== <code>prev</code> ====
أي محدِّد صحيح.

==== <code>siblings</code> ====
محدِّد لترشيح العناصر الأخوة التي تلي العنصر المعطى في المحدِّد الأول <code>prev</code>.

الفارق الأساسي بين محدد العناصر الأخوة المتجاورة <code>[[jQuery/next adjacent selector|prev + next]]</code> ومحدد العناصر الأخوة <code>prev ~ siblings</code> هو الوصول الخاص بكل منهما إلى العناصر. فالأول يصل إلى العنصر الأخ الذي يلي العنصر مباشرةً فقط، بينما يوسِّع الأخير مجاله ليصل إلى جميع العناصر الأخوة التي تلي ذلك العنصر.

=== أمثلة ===
إيجاد جميع العناصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> الأخوة التي تأتي بعد العنصر ذي المعرف "prev". لاحظ أنَّ العنصر <code>[[HTML/span|<nowiki><span></nowiki>]]</code> لم يُحدَّد لأنه ليس من النوع  <code>[[HTML/div|<nowiki><div></nowiki>]]</code>، والعنصر "niece" لم يحدَّد أيضًا لأنَّه عنصر ابن للعنصر الأخ:<syntaxhighlight lang="html">
<!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>
</syntaxhighlight>

== مصادر ==
* [http://api.jquery.com/next-siblings-selector/ صفحة المحدِّد next siblings في توثيق jQuery الرسمي.]