jQuery Учебка - 9

[netcat-na-diary]

jQuery Traversing

Наследование, отношения

Предки

• parent()


• parents()


• parentsUntil()

The parent() method returns the direct parent element of the selected element
непосредственный родитель выбранного элемента

The parents() method returns all ancestor elements of the selected element, all the way up to the document's root element ()
возвращает все родительские элементы вплоть до корневого элемента html

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

$(document).ready(function(){
  $("span").parents("ul");
});

The parentsUntil() method returns all ancestor elements between two given arguments.
Получает все родительские элементы до того, который указан в качестве параметра, но не включая его.

$(document).ready(function(){
  $("span").parentsUntil("div");
});

Дочерние элементы

• children()


• find()

The children() method returns all direct children of the selected element.
Возвращает все дочерние элементы выбранного элемента первого уровня (на нижние уровни не идет)

Также можно добавить фильтрующий параметр

$(document).ready(function(){
  $("div").children("p.1");
});

The find() method returns descendant elements of the selected element, all the way down to the last descendant.
Возвращает все дочерние элементы
http://jsfiddle.net/hrCfh/11/
http://jsfiddle.net/hrCfh/

Siblings - Сестринские элементы

• siblings()


• next()


• nextAll()


• nextUntil()


• prev()


• prevAll()


• prevUntil()

The siblings() method returns all sibling elements of the selected element.
http://jsfiddle.net/hrCfh/11/

Можно добавить фильтрующий параметр

$(document).ready(function () {
    $('#button-1').on('click', function () {
        var styles = {
            'border': '1px solid #00f',
                'color': '#f00'
        };
        $('.block-1').find('h2').siblings('p').css(styles);
    });
});

http://jsfiddle.net/hrCfh/14/

The next() method returns the next sibling element of the selected element.
http://jsfiddle.net/hrCfh/15/

The nextAll() method returns all next sibling elements of the selected element.
http://jsfiddle.net/hrCfh/17/

В метод nextAll можно добавить фильтрацию
http://jsfiddle.net/hrCfh/18/

The nextUntil() method returns all next sibling elements between two given arguments.
http://jsfiddle.net/hrCfh/19/

The prev(), prevAll() and prevUntil() methods work just like the methods above but with reverse functionality: they return previous sibling elements (traverse backwards along sibling elements in the DOM tree, instead of forward).

@темы: jQuery, jQuery Учебка, Ссылки