javascript - 如何根据数据路径查找元素并更改其中的类

Question

我想使用 JS 找到以下部分并将类从 fa-list-ol 更改为 fa-car 但我似乎无法更改它。任何帮助表示赞赏!

PS:我想去:如果 data-path=test 然后找到包含 fa-list-ol 的 i 类并更改将其添加到必填字段。

我可以使用 Jquery 或 JS。只要它能起作用我就很高兴

<li class="pl-folder" data-path="test">
    <i class="fa fa-bars pl-action" data-toggle="modal" data-target="#modal-pl-menu-playlist" title="Actions"></i>
    <span>
        <i class="fa fa-list-ol"></i>
        hello world
    </span>
</li>

JS(现在我没有 [3] <-- 我不想要这个，我只是希望它自动找到它，因为我有超过 100 个列表!):

var attrValue = document.getElementsByName('pl-folder')[3].getAttribute("data-path");
if (attrValue == "test") {
    document.getElementsByName('pl-folder')[3].className = "fa fa-car";
}

Answer 1

实现您的需求的最简单方法是使用 jQuery 的 filter()找到 li与匹配的data-path属性值，然后遍历 DOM 找到其子项 i元素并切换所需的类。试试这个:

$('.pl-folder').filter(function() {
  return $(this).data('path') == 'test';
}).find('span i').toggleClass('fa-list-ol fa-car');

.fa-car {
  color: #C00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="pl-folder" data-path="test">
    <i class="fa fa-bars pl-action" data-toggle="modal" data-target="#modal-pl-menu-playlist" title="Actions"></i>
    <span>
        <i class="fa fa-list-ol">TEST</i>
        hello world
    </span>
  </li>
  <li class="pl-folder" data-path="foo">
    <i class="fa fa-bars pl-action" data-toggle="modal" data-target="#modal-pl-menu-playlist" title="Actions"></i>
    <span>
        <i class="fa fa-list-ol">FOO</i>
        hello world
    </span>
  </li>
  <li class="pl-folder" data-path="bar">
    <i class="fa fa-bars pl-action" data-toggle="modal" data-target="#modal-pl-menu-playlist" title="Actions"></i>
    <span>
        <i class="fa fa-list-ol">BAR</i>
        hello world
    </span>
  </li>
</ul>

请注意，我只在 <i> 中添加了一些文本元素以使类更改的效果可见。

您还可以简化 jQuery 以使用属性选择器，但请注意，这仅在 data 时才有效。 attirbute 在 DOM 中设置，而不是在 jQuery 的内部缓存中设置:

$('.pl-folder[data-path="test"]').find('span i').toggleClass('fa-list-ol fa-car');