Jquery this parent html

Traversing

Once you’ve made an initial selection with jQuery, you can traverse deeper into what was just selected. Traversing can be broken down into three basic parts: parents, children, and siblings. jQuery has an abundance of easy-to-use methods for all these parts. Notice that each of these methods can optionally be passed string selectors, and some can also take another jQuery object in order to filter your selection down. Pay attention and refer to the API documentation on traversing to know what variation of arguments you have available.

link Parents

The methods for finding the parents from a selection include .parent() , .parents() , .parentsUntil() , and .closest() .

div class="grandparent">
 div class="parent">
 div class="child">
 span class="subchild"> span>
 div>
 div>
 div class="surrogateParent1"> div>
 div class="surrogateParent2"> div>
 div>

// Selecting an element's direct parent:
 
// returns [ div.child ]
$( "span.subchild" ).parent();
 
// Selecting all the parents of an element that match a given selector:
 
// returns [ div.parent ]
$( "span.subchild" ).parents( "div.parent" );
 
// returns [ div.child, div.parent, div.grandparent ]
$( "span.subchild" ).parents();
 
// Selecting all the parents of an element up to, but *not including* the selector:
 
// returns [ div.child, div.parent ]
$( "span.subchild" ).parentsUntil( "div.grandparent" );
 
// Selecting the closest parent, note that only one parent will be selected
// and that the initial element itself is included in the search:
 
// returns [ div.child ]
$( "span.subchild" ).closest( "div" );
 
// returns [ div.child ] as the selector is also included in the search:
$( "div.child" ).closest( "div" );

link Children

The methods for finding child elements from a selection include .children() and .find() . The difference between these methods lies in how far into the child structure the selection is made. .children() only operates on direct child nodes, while .find() can traverse recursively into children, children of those children, and so on.

// Selecting an element's direct children:
 
// returns [ div.parent, div.surrogateParent1, div.surrogateParent2 ]
$( "div.grandparent" ).children( "div" );
 
// Finding all elements within a selection that match the selector:
 
// returns [ div.child, div.parent, div.surrogateParent1, div.surrogateParent2 ]
$( "div.grandparent" ).find( "div" );

link Siblings

The rest of the traversal methods within jQuery all deal with finding sibling selections. There are a few basic methods as far as the direction of traversal is concerned. You can find previous elements with .prev() , next elements with .next() , and both with .siblings() . There are also a few other methods that build onto these basic methods: .nextAll() , .nextUntil() , .prevAll() and .prevUntil() .

Источник

Поиск родительского элемента

Осуществляет поиск родительских элементов всех заданных элементов. Метод имеет один вариант использования:

Возвращает родительские элементы всех выбранных элементов. При необходимости, можно указать селектор selector для фильтрации результата.

$(«#block»).parent()	вернет родителя элемента с идентификатором block.
$(«div»).parent()	вернет родительские элементы всех div-ов.
$(«div»).parent(«.lBlock»)	вернет элементы класса lBlock, которые являются родительскими для div-элементов на странице.

В действии

Найдем бомбы в коробках (элементы класса bomb, лежащие непосредственно внутри элементов класса box):

~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~script src="https://code.jquery.com/jquery-latest.js"~gt~~lt~/script~gt~ ~lt~style~gt~ div < width: 60px; height: 60px; float: left; padding: 15px; margin: 5px; background-color: #EEEEEE; font-size: 18pt; >~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~div ~gt~ ~lt~p ~gt~1~lt~/p~gt~ ~lt~/div~gt~ ~lt~div ~gt~ ~lt~span ~gt~ ~lt~p ~gt~2~lt~/p~gt~ ~lt~/span~gt~ ~lt~/div~gt~ ~lt~div ~gt~ ~lt~p ~gt~3~lt~/p~gt~ ~lt~/div~gt~ ~lt~div ~gt~ ~lt~p ~gt~4~lt~/p~gt~ ~lt~/div~gt~ ~lt~script~gt~ $(".bomb").parent(".box").css("border","3px solid red")("Бомба, епт!"); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~

Замечание: в данном примере, div-элемент под номером 2 не был выделен, поскольку между элементами классов box и bomb есть промежуточный элемент с классом paper. Поэтому, элемент box не является непосредственным родителем элемента bomb.

Ссылки

Источник

Навигация по элементам в jQuery

Нахождение потомков для каждого элемента текущего набора в jQuery выполняется с помощью find() .

Указать искомые элементы можно посредством селектора, ссылки на DOM-элементы или набора jQuery. В качестве результата этот метод возвращает новый объект jQuery, состоящий из найденных элементов.

Например, выбрать все элементы с классом « carousel-items », расположенные в « .carousel »:

 
 
.
 
.
 
.
  

children() – выбор дочерних элементов

Кроме find() в jQuery имеется ещё один похожий метод: children() .

children() в отличие от find() выполняет поиск элементов только среди детей каждого элемента текущего набора (т.е. не опускается ниже одного уровня по DOM-дереву).

Для выбора всех дочерних элементов для каждого элемента текущего набора children() необходимо вызвать без аргументов:

 
.
 
.
 
 
.
 
.
 
  

Если необходимо выбрать не все, а только определённые, то можно использовать селектор.

Например, выберем не все элементы, а только :

const elements = $('.message').children('h3');

closest() – выбор ближайшего предка

В jQuery поиск ближайшего предка (включая сам этот элемент) выполняется с помощью метода closest() .

Если более точно, то closest() выбирает для каждого элемента текущего набора первый элемент, соответствующий указанному (поиск начинается с самого элемента, а потом вверх по предкам).

Для указания искомый элементов можно использовать селектор, ссылку на DOM-элементы и набор jQuery.

в качестве ближайшего предка для элементов текущего набора:

next() – выбор следующего элемента

В jQuery получить для каждого элемента набора следующий элемент (при необходимости соответствующий указанному селектору) можно с помощью метода next() .

При этом следующий элемент по отношению к исходному должен являться сиблингом (или другими словами находиться с ним на одном уровне вложенности). В качестве результата next() возвращает новый объект jQuery, состоящий из найденных элементов.

Если необходимо выбрать не конкретный элемент, а просто следующий, то в этом случае вызывать next() необходимо без аргументов:

const element = $('li.active').next();

Когда необходимо получить не один, а все следующие элементы для каждого элемента набора, следует использовать nextAll() .

const elements = $('li.active').nextAll();

Кроме next() и nextAll() в jQuery имеется ещё nextUntil() . Он позволяет получить все следующие элементы до указанного.

const elements = $('li.active').nextUntil('li','li:last-child');

prev() – выбор предыдущего элемента

В jQuery кроме методов для выбора следующих элементов имеются аналогичные для получения предыдущих: prev() , prevAll() и prevUntil() .

siblings() – выбор сиблингов

Получение сиблингов для каждого элемента набора в jQuery осуществляется с помощью метода siblings() .

При этом, если нужно выбрать не все, а только определённые сиблинги, то можно указать соответствующий селектор. В качестве результата siblings() возвращает новый набор jQuery, состоящий из найденных элементов.

parent() – получение родителя

В jQuery получение родительского элемента для каждого элемента текущего набора осуществляется с помощью parent() .

При необходимости в parent() мы можем передать селектор и тем самым указать, что нам нужны только элементы соответствующие ему.

В jQuery кроме parent() имеется ещё метод parents() . Он в отличие от первого получает для элементов набора не только их непосредственных родителей, а вообще всех предков (до ).

При необходимости можно выбрать не всех предков, а только тех, которые соответствует указанному селектору.

Например, получим предков, соответствующего селектору .one для элемента с классом three :

 
 
.
 
 
  

Ограничить подъём по дереву DOM при получении предков можно посредством parentsUntil() :

Например, получим предков являющимися для элемента с классом active (при этом поиск предков должен ограничиваться элементом соответствующим селектору .container :

 
 
 
.
 
 
 
  

offsetParent() – получение ближайшего позиционированного предка

В jQuery для получения ближайшего позиционированного предка можно воспользоваться offsetParent() . Этот метод не принимает никаких аргументов.

Этот метод может использоваться в операциях расчета смещений для выполнения анимации и размещения объектов на странице.

Например, найдём offsetParent для элемента с классом active :

 
 
 
.
 
 
 
  

contents() — выбрать все дочерние узлы

В jQuery метод children() используется, когда нужно получить все дочерние узлы (элементы, текстовые узлы и комментарии) для каждого элемента текущего набора.

Этот метод не принимает никаких аргументов.

.contents() и .children() аналогичны, за исключением того, что первый включает в себя текстовые узлы и комментарии.

Метод .contents() можно также использовать для получения содержимого iframe, если iframe находится в том же домене, что и главная страница.

Начиная с jQuery 3.2, .contents() также возвращает содержимое элементов.

Источник