[Селектор] has(selector)
Раздел "Selectors"
Уменьшение набора выбираемых элементов к тем элементам, которые имеют элементы потомки, соответсвующие селектору, указанному в параметре selector.
selector: селектор, с помощью которого происходит фильтрация элементов.
contained:
элемент структуры DOM, по которому происходит уменьшение набора элементов.
jQuery объект представлен как набор элементов. Метод .has() выбирает из этого набора более узкий набор элементов, создавая новый объект jQuery, из подмножетсва элементов. Селектор указанный в параметре selector проверяет имеет ли в наличии выбранный элемент элементы потомки, если имеет, то результат будет сожержать указнные элементы.
has(selector)
Пример:
Добавить класс "test" ко всем элементам div, которые имеют вложенный параграф.
"jQuery"
$("div:has(p)").addClass("test");
"HTML"
<div><p>Hello in a paragraph</p></div>
<div>Hello again! (with no paragraph)</div>
"CSS"
.test{ border: 3px inset red; }"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css"
rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div:has(p)").addClass("test");
});
</script>
</head>
<body class="iframe">
<div><p>Hello in a paragraph</p></div>
<div>Hello again! (with no paragraph)</div>
</body>
</html>
<style>
.test{ border: 3px inset red; }
</style>
Пример:
Ниже указан пример проверки наичия одного элемеента в нутри другого.
"jQuery"
$("div").css("border", "2px solid red")
.addClass(function(){
return "div"+$(this).index;});
"HTML"
<div class="div1"><p>Первый div</p></div>
<div class="div2"><p>Второйdiv</p></div>
"CSS"
.div1{background: #cadceb;}
.div2{background: #fef;}
"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css"
rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div").css("border", "2px solid red")
.addClass(function(){
return "div"+$(this).index;});
});
</script>
</head>
<body class="iframe">
<div class="div1"><p>Первый div</p></div>
<div class="div2"><p>Второйdiv</p></div>
</body>
</html>
<style>
.div1{background: #cadceb;}
.div2{background: #fef;}
</style>
Версия jQuery 1.4.2
Документ создан 2010-08-21
