kwork banner 468x60kwork banner 728x90kwork banner 930x180jivo banner 468x60jivo banner 728x90jivo banner 930x180smsc banner 468x60smsc banner 728x90smsc banner 930x180

jQuery предоставляет такие полезные методы, такие как parent(), parents() и parentsUntil(), которые можно использовать для получения в DOM-дереве любого предка в иерархии.

jQuery-метод parent()

jQuery-метод parent() используется для получения прямого родительского элемента.

В следующем примере будет выделен прямой родительский элемента <li> — элемент <ul>, путем добавления класса .highlight.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery parent() Demo</title>
<style>
    .highlight{
        background: yellow;
    }        
</style>
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script>$(document).ready(function(){ $("li").parent().addClass("highlight");
});
</script>
</head><body> <div class="container"> <h1>Hello World</h1> <p>This is a <em>simple paragraph</em>.</p> <ul> <li>Item One</li> <li>Item Two</li> </ul> </div></body></html>

jQuery-метод parents()

jQuery-метод parents() используется для получения предков выбранного элемента.

В следующем примере будет добавлена граница вокруг всех элементов-предков <li>, которыми являются элементы <ul>, <div>, <body> и <html>.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery parents() Demo</title>
<style>
    *{
        margin: 10px;
    }
    .frame{
        border: 2px solid green;
    }        
</style>
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script>$(document).ready(function(){ $("li").parents().addClass("frame");
});
</script>
</head><body> <div class="container"> <h1>Hello World</h1> <p>This is a <em>simple paragraph</em>.</p> <ul> <li>Item One</li> <li>Item Two</li> </ul> </div></body></html>

При желании вы можете включить один или несколько селекторов в качестве параметра в методе parents(), чтобы отфильтровать результаты поиска предков. В следующем примере будет применена граница вокруг всех предков <li>, которыми являются элементы <div>.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery parents() Demo</title>
<style>
    *{
        margin: 10px;
    }
    .frame{
        border: 2px solid green;
    }        
</style>
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script>$(document).ready(function(){ $("li").parents("div").addClass("frame");
});
</script>
</head><body> <div class="container"> <h1>Hello World</h1> <p>This is a <em>simple paragraph</em>.</p> <ul> <li>Item One</li> <li>Item Two</li> </ul> </div></body></html>

jQuery-метод parentsUntil()

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

В следующем примере будет добавлена граница вокруг всех элементов-предков <li>, за исключением элемента <html>, т. е. добавлена граница для элементов <ul>, <div> и <body>.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery parentsUntil() Demo</title>
<style>
    *{
        margin: 10px;
    }
    .frame{
        border: 2px solid green;
    }        
</style>
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script>$(document).ready(function(){ $("li").parentsUntil("html").addClass("frame");
});
</script>
</head><body> <div class="container"> <h1>Hello World</h1> <p>This is a <em>simple paragraph</em>.</p> <ul> <li>Item One</li> <li>Item Two</li> </ul> </div></body></html>
skillbox banner 480x320skillbox banner 728x90skillbox banner 120x600flexbe banner 480x320flexbe banner 728x90flexbe banner 120x600kwork banner 480x320kwork banner 728x90kwork banner 120x600

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.

Похожие посты

Руководство по синтаксису в jQuery

Оператор jQuery обычно начинается со знака доллара ($) и заканчивается точкой с запятой (;). В jQuery знак доллара ($) — это просто псевдоним для jQuery. Давайте рассмотрим следующий пример кода, который демонстрирует синтаксис кода на jQuery. Приведенный выше пример просто отображает предупреждающее сообщение «Hello World!» пользователю. Объяснение кода Давайте разберем приведенный выше пример подробнее. Тег…

Руководство по методу animate() в jQuery

jQuery-метод animate() используется для создания пользовательских анимаций. Метод animate() обычно используется для анимации числовых CSS-свойств, таких как width, height, margin, padding, opacity, top, left и т. д., Но нечисловые свойства, такие как color или background-color нельзя анимировать с помощью базовой функциональности jQuery. Не все CSS-свойства являются анимируемыми. Как правило, любое CSS-свойство, которое принимает значения в…

Руководство по callback-функциям в jQuery

Операторы JavaScript выполняются построчно. Но, поскольку для завершения эффекта jQuery требуется некоторое время, код следующей строки может выполняться, пока предыдущий эффект все еще выполняется. Чтобы этого не происходило, jQuery предоставляет функцию обратного вызова (Callback) для каждого метода. Функция обратного вызова — это функция, которая выполняется после завершения эффекта. Функция обратного вызова передается в качестве аргумента…