jQuery предоставляет такие полезные методы, такие как children() и find(), которые можно использовать для получения в DOM-дереве любого потомка в иерархии.
jQuery-метод children()
jQuery-метод children() используется для получения прямых дочерних элементов выбранного элемента.
В следующем примере будут выделены прямые дочерние элемента <ul> — элементы <li>, путем добавления класса .highlight.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery children() 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").children().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-метод find()
jQuery-метод find() используется для получения элементов-потомков выбранного элемента.
Методы find() и children() похожи, за исключением того, что метод find() осуществляет поиск по нескольким уровням вниз по дереву DOM до последнего потомка, тогда как метод children() выполняет поиск только по одному уровню вниз по дереву DOM. В следующем примере будет добавлена граница вокруг всех элементов <li>, которые являются потомками элемента <div>.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery find() Demo</title>
<style>
*{
margin: 10px;
}
.frame{
border: 2px solid green;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("div").find("li").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>Однако, если вы хотите получить все элементы-потомки, вы можете использовать универсальный селектор.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery find() Demo</title>
<style>
*{
margin: 10px;
}
.frame{
border: 2px solid green;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("div").find("*").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>
