Question

如何在以下场景中为每个孩子分配课程：

读取数据选项值，并为子项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 dos没有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'));
    });
});

Answer 2

您可以使用has attribute selector ([])来测试属性存在：

$('li[data-option]').each(function () {
    var dataOption = $(this).attr('data-option');
    $(this).find('ul').addClass(dataOption);
});

Check demo here

注意：您可以使用.data('option')代替.attr('data-option')。真的，这是一个选择问题。在这种情况下，我使用.attr()，因为.data()更像是＆＃34;存储＆＃34;而不是属性访问器函数 - 并且，当您明显访问data-option属性时，没有从字符串值转换，.attr()函数似乎更好地表示您在代码中的意图。

Answer 3

嗯，你可以这样做：

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

使用filter有助于提高性能，因为它允许jquery使用原生querySelector。

jQuery基于paren数据属性添加类

3 个答案: