محدد العناصر الأخوة ("prev ~ siblings") في jQuery
< 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>