Метод JQuery ближе ()

Определение и использование

Ближайший () метод возвращает первый элемент предком выбран элемент.

Предки отец, дед, прадед, и так далее.

DOM дерево: Этот метод обхода вверх из текущего элемента , пока все пути корневого элемента документа (), чтобы найти первый элемент DOM предком элемента.

Этот метод Родители () Точно так же, дерево DOM , пересечена вверх, она отличается:

Ближайший ()

Начиная с текущего элемента
Первый сингл предка DOM, обход дерева вверх, и возвращает совпадающие выражения, передаваемые
Возвращает JQuery объект содержит ноль или один элемент

родители()

Начните с родительского элемента
DOM, обход дерева направления вверх, и возвращает переданное выражение соответствуют все предкам
Возвращает JQuery объект содержит ноль, один или несколько элементов

грамматика

Возвращает первый предок элемент выбранного элемента:

$ (Селектор) .closest (фильтр)

Возвращает первый контекст предка элемент DOM, чтобы найти дерево DOM:

$ (Селектор) .closest (фильтр, контекст)

параметры

параметры	необходимо	описание
фильтр	Здесь	Уточнение положения предок элементов в диапазоне экспрессии элемент выбора или объект JQuery.
контекст	нет	Вы можете найти элементы DOM, соответствующие элементы в нем.

примеров

Следующий пример демонстрирует возвращение <SPAN> первый элемент является предком <уль> элемент:

<! DOCTYPE HTML>
<HTML>
<Голова>
<Мета кодировка = "UTF-8">
<Title> Добро пожаловать на JQ Tutorial </ title>
<Стиль>
.ancestors * {
отображения: блок;
границы: 2px твердые светло-серый;
Цвет: светло-серый;
обивка: 5px;
Маржа: 15px;
}
</style>
//此版本是百度cdn 1.11.1，当然你可以使用更高的版本，从2.0版本以上的是不支持ie6-8的
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("span").closest("ul").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body> body (曾曾祖先节点)
<div style="width:500px;">div (曾祖先节点)
<ul>ul (第二祖先 - 第二祖先节点)
<ul>ul (第一祖先 - 第一祖先节点)
<li>li (直接父节点)
<span>span </span>
</li>
</ul>
</ul>
</div>
</body>
</html>