محدد العناصر الأخوة ‎‎("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>

مصادر