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>
