在jquery中siblings找到所有元素的同辈元素,是什么意思，有人可以给我详细讲解一下不？

在jquery中siblings找到所有元素的同辈元素,是什么意思，有人可以给我详细讲解一下不？

官方这样解释的:

  <div>
    <span>Hello</span>
</div>
<p class="selected">Hello Again</p>
<p>And Again</p>
<p>Hello Again</p>
<button type='button'>button</button>

$(document).ready(function() {
$('button').click(function() {
    $('div').siblings('.selected').addClass('cls')
})

})

很明显，我每一次点击button，都是selected选择器更改样式颜色，请问怎样解释
“ 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。”

---

什么是同级元素，就是和参照元素在同一个html结构层级上的元素，它们有共同的直接祖先元素
例如

<div id="outDiv1">
    <div>a</div>
    <div>b</div>
    <div>c</div>
</div>
<div id="outDiv2">
</div>

outDiv1和outDiv2就是同级元素。a、b、c也是同级元素
但是outDiv1和a、b、c不是同级元素

同理如下HTML结构， 1、2、3、4和包含5、6的li 是同级元素，5、6也是同级元素，但和1、2、3、4不是同级的
<ul id="dd">

<li data-type="3">1</li>
<li data-type="1">2</li>
<li data-type="0">3</li>
<li data-type="1">4</li>
<li data-type="0">
 <ul>
    <li data-type="0">5</li>
    <li data-type="0">6</li>
 </ul>
</li>

</ul>

$('ul#dd li[data-type=3]').siblings('li[data-type=0]')//返回li 3,和包含5,6的li，不直接包含5,6

$('ul#dd li[data-type=3]')返回的包装集合为ul#dd下的所有li[data-type=3]元素,此时集合中只有一个元素li 1
siblings('li[data-type=0]');
对LiCol中的每一个li元素查找同级元素,并且每个li元素必须要具有data-type属性并且值为0
li 1的统计元素有1、2、3、4、包含5、6的li。符合[data-type=0]的只有3、包含5、6的li