Показать сообщение отдельно
  #1 (permalink)  
Старый 21.03.2014, 16:41
Аспирант
Отправить личное сообщение для Boolean_Type Посмотреть профиль Найти все сообщения от Boolean_Type
 
Регистрация: 02.02.2014
Сообщений: 48

Установка фона для ближайших родителей (метод .closest())
Здравствуйте всем!
Код:
<!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" и применяет к нему (в т.ч., естественно, к его детям) зелёный фон. Видно, что это контейнер всего представленного списка. Так почему же вследствие работы второй части кода весь список не окрашивается в зел. цвет? Ведь правило установления зел. фона идёт после правила установления красного.
Ответить с цитированием