jQuery 基于 paren 数据属性添加类

Question

在以下情况下如何为每个 child 分配类(class):

读取数据选项值，并为子ul分配相同的类名

<ul id="menu">
  <li data-option="first"> <a href="#">First Item</a>
    <ul>
      <li><a href="#">Second level link</a></li>
      <li><a href="#">Second level link</a></li>
      <li><a href="#">Second level link</a></li>
    </ul>
  </li>
  <li data-option="second"> <a href="#">Second Item</a>
    <ul>
      <li><a href="#">Second level link</a></li>
      <li><a href="#">Second level link</a></li>
      <li><a href="#">Second level link</a></li>
      <li><a href="#">Second level link</a></li>
    </ul>
  </li>
  <li> <a href="#">Third Item</a>
    <ul>
      <li><a href="#">Second level link</a></li>
      <li><a href="#">Second level link</a></li>
      <li><a href="#">Second level link</a></li>
    </ul>
  </li>
</ul>

预期结果应该是:

<ul id="menu">
  <li data-option="first"> <a href="#">First Item</a>
    <ul class="first">
      <li><a href="#">Second level link</a></li>
      <li><a href="#">Second level link</a></li>
      <li><a href="#">Second level link</a></li>
    </ul>
  </li>
  <li data-option="second"> <a href="#">Second Item</a>
    <ul class="second">
      <li><a href="#">Second level link</a></li>
      <li><a href="#">Second level link</a></li>
      <li><a href="#">Second level link</a></li>
      <li><a href="#">Second level link</a></li>
    </ul>
  </li>
  <li> <a href="#">Third Item</a>
    <ul>
      <li><a href="#">Second level link</a></li>
      <li><a href="#">Second level link</a></li>
      <li><a href="#">Second level link</a></li>
    </ul>
  </li>
</ul>

请注意，最后一个 li 没有 data-option 属性。

Answer 1

再收集一个，只过滤数据选项li，尽可能重用$ul对象

$(document).ready(function() {
    $('#menu>li[data-option]').each(function() {
        var $ul = $(this);
        $ul.find('ul').addClass($ul.data('option'));
    });
});