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>