UL标记 - 根据级别添加类

Question

我正在寻找一个自动向UL标签添加类的选择器（即使列表包含3个以上的级别）。我总是需要UL标签的级别。

DEMO

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

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

Answer 1

不需要使用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>

Demo:

Answer 2

不使用选择器，您可以一次执行此操作：

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