селектор ребенок
Описание: Выбор всех прямых дочерних элементов указанных как "ребенок" из элементов, указанных как "родитель".
jQuery('родитель > ребенок')
Добавлена в версию: 1.0
родитель
Любой допустимый селектор.
ребенок
Селектор для фильтрации дочерних элементов.
Как и селектор CSS, селектор ребенок поддерживается всеми современными веб-браузерами, включая Safari, Firefox, Opera, Chrome, и Internet Explorer 7 и выше, но не поддерживается Internet Explorer 6 и ниже. Однако, в jQuery, этот селектор (наряду со всеми другими) работает во всех поддерживаемых браузерах, включая IE6.
Комбинатор ребенка (E > F) можно рассматривать как более конкретные формы комбинатора потомка (E F) в том, что он выбирает только потомков первого уровня.
Примеры
Пример 1
Поиск всех дочерних элементов элемента с ID «main» (элемент с желтым фоном).Пример 1 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("#main > *").css("border", "3px double red"); }); </script> <style> body { font-size:14px; } span#main { display:block; background:yellow; height:110px; } button { display:block; float:left; margin:2px; font-size:14px; } div { width:90px; height:90px; margin:5px; float:left; background:#bbf; font-weight:bold; } div.mini { width:30px; height:30px; background:green; } </style> </head> <body> <span id="main"> <div></div> <button>Child</button> <div class="mini"></div> <div> <div class="mini"></div> <div class="mini"></div> </div> <div><button>Grand</button></div> <div><span>A Span <em>in</em> child</span></div> <span>A Span in main</span> </span> </body> </html>
Пример 2
Устанавливает границы вокруг всех элементов списка, которые являются потомками <ul class="topnav">.Пример 2 - Полный код:
<!DOCTYPE html>
<html>
<head>
<style>
body { font-size:14px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("ul.topnav > li").css("border", "3px double red");
});
</script>
</head>
<body>
<ul class="topnav">
<li>Item 1</li>
<li>Item 2
<ul><li>Nested item 1</li><li>Nested item 2</li><li>Nested item 3</li></ul>
</li>
<li>Item 3</li>
</ul>
</body>
</html>
Была ли эта информация полезной?
