При великій кількості однотипних груп елементів постає питання розробки універсального коду для обробки цих груп і пошуку одних елементів через інших. Такий вибір елементів називають відносним пошуком.

.siblings('селектор') - відбере, для раніш відібраних елементів, братні елементи одного рівня, які підпадають під дії селектора
.parent('селектор') - відбере, для раніш відібраних елементів, безпосередніх батьків (1-го рівня) вказаних в parent
.parents('селектор') - відбере, для раніш відібраних елементів, батьків, вказаних в parentі на всіх верхніх рівнях
.closest('селектор') - відбере, для раніш відібраних батьківських та прабатьківських елементів, ті елементи, які відповідають зазначеному в селекторі
.children('селектор') - відбере, для раніш відібраних елементів, нащадків першого рівня,які підпадають під дії селектор
.find('селектор') - відбере, для раніш відібраних елементів, нащадків на всіх нижніх рівнях
.next('селектор') - відбере один наступний елемент, що відповідає селектору, але тільки якщо цей наступний йде одразу за раніш вибраним , якщо нічого не вказувати в дужках, то вибереться будь-який елемент, що йде наступним (теги переводу рядка <br/> враховуються)
.nextАll('селектор') - відбере всі наступні елементи, що відповідають селектору, навіть якщо вони йдуть не відразу за раніше обраним
.prev(селектор) - відбере безпосередньо-попередній елемент, що відповідає селектору
.prevAll(селектор) - відбере всі попередні елементи, що відповідають селектору, якщо селектор не вказувати, а тільки пусті дужки (), то виберуться всі елементи

Приклади

 <table  id="tbl">
<tr>
  <th></th><th colspan="4">.siblings - вибір братніх</th>
</tr>
 <tr>
  <td>Microsoft</td> <td>10</td> <td>11</td> <td>12</td><td>13</td>
 </tr>
<tr>
  <td>Google</td> <td>20</td><td>21</td><td>22</td><td>23</td>
</tr>
<tr>
  <td>Apple</td><td>30</td><td>31</td><td>32</td><td>33</td>
</tr>
<tr>
  <td>IBM</td><td>40</td><td>41</td><td>42</td<td>43</td>
</tr>
 </table>

$('#tbl td').click (function(){
	$(this).siblings('td').css('background-color',"#5691e0");
});

При кліку по будь-якому блоку вибираємо перший батьківський елемент зазначений в селекторі .parent і встановлюємо червоний бордер

$('#pr div').click (function(e){
	e.stopPropagation();/*клік по верхньому блоку не є кліком по нижньому,
зупиняємо  bibbling-ефект;*/	
	            $(this).parent('div').css('border',"3px solid red");
				
});

При кліку по синьому блоку .dc2 вибираємо всі батьківські елементи зазначені в селекторі .parents (всі div, що знаходяться в фіолетовому блоці #fiolBl) і встановлюємо для них червоний бордер

$('#pr .dc2').click (function(){
	 $(this).parents('#fiolBl div').css('border',"3px solid red");
});

При кліку по синьому блоку .dc2 відбераємо, для раніш відібраних батьківських та прабатьківських елементів, ті елементи, які відповідають зазначеному в селекторі -.d2 (цей клас у жовтих блоків)

$('#zelenBl .dc2').click (function(){
	 	 $(this).closest('.d2').css('border',"3px solid red");
});

При кліку по фіолетовому і по будь-якому вкладенному в нього блоку вибираємо нащадків першого рівня, зазначених в селекторі .children і встановлюємо для них червоний бордер

$('#fiolBl, #fiolBl div').click (function(e){
	e.stopPropagation();/*клік по верхньому блоку не є кліком по нижньому,
зупиняємо  bibbling-ефект;*/	
	 $(this).children('div').css('border',"3px solid red");
});

При кліку по фіолетовому і по будь-якому вкладенному в нього блоку вибираємо нащадків на всіх нижніх рівнях, зазначених в селекторі .find і встановлюємо для них червоний бордер

$('#fiolBl, #fiolBl div').click (function(e){
	e.stopPropagation();/*клік по верхньому блоку не є кліком по нижньому,
зупиняємо  bibbling-ефект;*/	
	 $(this).find('div').css('border',"3px solid red");
});

Якщо рівень вкладеності елементів тільки один, то .children(селектор) та .find(селектор) працюють однаково. Але є випадки коли .children(селектор) спрацьювує неправильно.

Нижченаведений код нібито повинен відібрати всі рядки, а потім в кожному обрати тільки першу чарунку td, як для .children(селектор) та .find(селектор), але .children(селектор) не спрацьовує так, як потрібно, а обирає тільки першу чарунку в першому рядку, хоча після першого етапу вибору рядків tr у виборку потрапляють всі 3 рядки.

 $('table tr').chidren('td:first');
 $('table tr').find('td:first');

Children, у такому випадку, чомусь, всі чарунки td збирає в один набір. Виберемо 7-му чарунку td в цьому наборі

 $('#btn').click (function(){
	 	 $('table tr').children('td:eq(7)').css('background-color',"red");
});

.dv7
    
1
2
   
 
3
4
 
	
   
5
span
6
7
	
   
8
9

При кліку по вкладеним в .dv7 блокам відберемо один наступний елемент, що відповідає селектору, але тільки якщо цей наступний йде одразу за раніш вибраним , якщо нічого не вказувати в дужках, то вибереться будь-який елемент, що йде наступним (теги переводу рядка <br/> враховуються)

$('.dv7 div').click (function(e){
	e.stopPropagation();/*клік по верхньому блоку не є кліком по нижньому,
зупиняємо  bibbling-ефект;*/
	 $(this).next('div').css('border',"3px solid red");
});

.dv7
    
1
2
   
 
3
4
 
	
   
5
span
6
7
	
   
8
9

При кліку по вкладеним в .dv7 блокам відберемо всі наступні елементи, що відповідають селектору, навіть якщо вони йдуть не відразу за раніше обраним

$('.dv7 div').click (function(e){
	e.stopPropagation();/*клік по верхньому блоку не є кліком по нижньому,
зупиняємо  bibbling-ефект;*/
	 $(this).nextAll('div').css('border',"3px solid red");
});

.dv7
    
1
2
   
 
3
4
 
	
   
5
span
6
7
	
   
8
9

При кліку по вкладеним в .dv7 блокам відберемо безпосередньо-попередній елемент, тільки якщо він йде наступним і відповідає селектору

$('.dv7 div').click (function(e){
	e.stopPropagation();/*клік по верхньому блоку не є кліком по нижньому,
зупиняємо  bibbling-ефект;*/
	 $(this).prev('div').css('border',"3px solid red");
});

.dv7
    
1
2
   
 
3
4
 
	
   
5
span
6
7
	
   
8
9

При кліку по вкладеним в .dv7 блокам відберемо всі елементи, що відповідають селектору, навіть якщо вони йдуть не відразу за раніше обраним

$('.dv7 div').click (function(e){
	e.stopPropagation();/*клік по верхньому блоку не є кліком по нижньому,
зупиняємо  bibbling-ефект;*/
	 $(this).prevAll('div').css('border',"3px solid red");
});