jQuery предоставляет такие полезные методы, такие как siblings(), next(), nextAll(), nextUntil(), prev(), prevAll() и prevUntil(), которые можно использовать для получения в DOM-дереве любого соседнего элемента.

jQuery-метод siblings()

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

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery siblings() Demo</title>
<style>
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $("p").siblings().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>

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery siblings() Demo</title>
<style>
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $("p").siblings("ul").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-метод next()

jQuery-метод next() используется для получения непосредственно следующего родного элемента, то есть следующего родственного элемента выбранного элемента. В следующем примере будет выделен следующий элемент элемента <p><ul>.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery next() Demo</title>
<style>
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $("p").next().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-метод nextAll()

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

В следующем примере будут выделены все родственные элементы элемента <p>, которые находятся рядом с ним.

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

jQuery-метод nextUntil()

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

В следующем примере будут выделены все следующие элементы одного элемента <h1>, исключая элемент <ul>, т.е. выделены оба элемента <p>.

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

jQuery-метод prev()

jQuery-метод prev() используется для получения непосредственно предшествующего одноуровневого элемента, то есть предыдущего элемента одноуровневого элемента выбранного элемента. В следующем примере будет выделен предыдущий элемент элемента <ul><p>.

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

jQuery-метод prevAll()

jQuery-метод prevAll() используется для получения всех предшествующих элементов выбранного элемента.

В следующем примере будут выделены все родственные элементы элемента <ul>.

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

jQuery-метод prevUntil()

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

В следующем примере будут выделены все предыдущие родственные элементы элемента <ul>, исключая элемент <h1>, т.е. выделены оба элемента <p>.

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

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

Руководство по синтаксису в 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) для каждого метода. Функция обратного вызова — это функция, которая выполняется после завершения эффекта. Функция обратного вызова передается в качестве аргумента…

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

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

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

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