Об'єднання вибірки з елементом, об'єднання попередньої вибірки з наступної, відміна останніх перетворень
.add('селектор') - додає, до раніше вибраних елементів, нові, зазначені у селекторі
.andBack() - об'єднує два набори, якщо вибрані якісь елементи, а потім до них застосовано метод (наприклад - children) , то можна об'єднати обидві виборки
.end() - відміняє останні перетворення, що відбулись з вибіркою
Приклади
.add(селектор).dv712345span6789
При кліку по вкладеним в .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"); });
далі ✏