10. Об'єднання виборок і відміна

Об'єднання вибірки з елементом, об'єднання попередньої вибірки з наступної, відміна останніх перетворень

.add('селектор') - додає, до раніше вибраних елементів, нові, зазначені у селекторі
.andBack() - об'єднує два набори, якщо вибрані якісь елементи, а потім до них застосовано метод (наприклад - children) , то можна об'єднати обидві виборки
.end() - відміняє останні перетворення, що відбулись з вибіркою

Приклади

.add(селектор)
.dv7
1
2
3
4
5
span
6
7
8
9
.dv7
1
2
3
4
5
span
6
7
8
9

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

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

.addBack()
<div id="fiolBl">
    

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

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

.end()
<div id="zelenBl">
    

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

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

далі ✏
Ігор Ка