Метод .siblings() находит соседей элемента внутри одного родителя.

См. также методы prev и next, которые находят соседей сверху и снизу.

См. также урок основы работы с jQuery для более полного понимания.

Синтаксис

Получение соседей: 

.siblings()

Можно также пофильтровать соседей по заданному селектору (в наборе останутся только те соседи, которые удовлетворяют этому селектору): 

.siblings(селектор)

Примеры

Пример

Давайте найдем элемент #test и всем его соседям поставим текст '!' с помощью html: 

<p>Абзац вне дива.</p>
<div>
	<p>Абзац.</p>
	<p>Абзац.</p>
	<p id="test">Абзац.</p>
	<p>Абзац.</p>
	<p>Абзац.</p>
</div>
<p>Абзац вне дива.</p>
$('#test').siblings().html('!');

HTML код станет выглядеть так: 

<p>Абзац вне дива.</p>
<div>
	<p>!</p>
	<p>!</p>
	<p id="test">Абзац.</p>
	<p>!</p>
	<p>!</p>
</div>
<p>Абзац вне дива.</p>

Пример

Давайте найдем элемент #test и всем его соседям с классом .www поставим текст '!' с помощью html: 

<p>Абзац вне дива.</p>
<div>
	<p>Абзац.</p>
	<p class="www">Абзац.</p>
	<p>Абзац.</p>
	<p id="test">Абзац.</p>
	<p>Абзац.</p>
	<p class="www">Абзац.</p>
	<p>Абзац.</p>
</div>
<p>Абзац вне дива.</p>
$('#test').siblings('.www').html('!');

HTML код станет выглядеть так: 

<p>Абзац вне дива.</p>
<div>
	<p>Абзац.</p>
	<p class="www">!</p>
	<p>Абзац.</p>
	<p id="test">Абзац.</p>
	<p>Абзац.</p>
	<p class="www">!</p>
	<p>Абзац.</p>
</div>
<p>Абзац вне дива.</p>