UL标记-添加依赖于级别的类

Question

我正在寻找一个选择器，它自动地将类添加到UL标记中(即使列表包含超过3个级别)。我总是需要UL标记所在的级别。

演示

$( "ul ul ul" ).addClass( "level-3" );
$( "ul ul" ).addClass( "level-2" );

但这会将UL添加到<ul class="level-2 level-3"中

Answer 1

在不使用选择器的情况下，您可以一次这样做：

jQuery("ul").addClass(function() {
    var depth = jQuery(this).parents("ul").length;
    return "level-" + (depth + 1);
});

Answer 2

不需要使用jQuery，你可以使用CSS。

​

/* Level 1 */ 
ul {
  background: #333;
}

/* Level 2 */ 
ul ul {
  background: #CC00FF;
}

/* Level 3 */ 
ul ul ul {
  background: #FF00CC;
}

/* Level 4 */ 
ul ul ul ul {
  background: #CCFF00;
}
a {
  text-decoration: none;
  color: #000000;
}

<ul>
  <li><a href="">Level 1</a>

    <ul>
      <li><a href="">Level 2</a>

        <ul>
          <li><a href="">Level 3</a>

          </li>
          <li><a href="">Level 3</a>

          </li>
          <li><a href="">Level 3</a>

          </li>
          <li><a href="">Level 3</a>

          </li>
          <li><a href="">Level 3</a>

          </li>
        </ul>
      </li>
      <li><a href="">Level 2</a>

      </li>
      <li><a href="">Level 2</a>

      </li>
      <li><a href="">Level 2</a>

      </li>
    </ul>
  </li>
  <li><a href="">Level 1</a>

  </li>
  <li><a href="">Level 1</a>

  </li>
  <li><a href="">Level 1</a>

  </li>
  <li><a href="">Level 1</a>

    <ul>
      <li><a href="">Level 2</a>

        <ul>
          <li><a href="">Level 3</a>

          </li>
          <li><a href="">Level 3</a>

          </li>
          <li><a href="">Level 3</a>

          </li>
          <li><a href="">Level 3</a>

          </li>
          <li><a href="">Level 3</a>

          </li>
        </ul>
      </li>
      <li><a href="">Level 2</a>

      </li>
      <li><a href="">Level 2</a>

      </li>
      <li><a href="">Level 2</a>

      </li>
    </ul>
  </li>
  <li><a href="">Level 1</a>

  </li>
  <li><a href="">Level 1</a>

  </li>
</ul>
<span></span>

​

演示：