Здравствуйте всем!
Код:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style>
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<ul id="one" class="level-1">
<li class="item-i">I</li>
<li id="ii" class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
<script>
var listItemII = document.getElementById( "ii" );
$( "li.item-a" )
.closest( "ul", listItemII )
.css( "background-color", "red" );
$( "li.item-a" )
.closest( "#one")
.css( "background-color", "green" );
</script>
</body>
</html>
Поведение первого блока скрипта предсказуемо:
$( "li.item-a" )
.closest( "ul", listItemII )
.css( "background-color", "red" );
Вопрос вызывает вторая часть:
$( "li.item-a" )
.closest( "#one")
.css( "background-color", "green" );
Метод
.closest( "#one") находит ближайший
ul с id "one" и применяет к нему (в т.ч., естественно, к его детям) зелёный фон. Видно, что это контейнер всего представленного списка. Так почему же вследствие работы второй части кода
весь список не окрашивается в зел. цвет? Ведь правило установления зел. фона идёт
после правила установления красного.