Question

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

PS：我想去：如果data-path=test，则找到包含i的{{1}}类并将其更改为必填字段。

我可以使用Jquery或JS。一旦它可以工作我很高兴

fa-list-ol

JS（现在我没有[3]＆lt; - 我不想要这个我只是想让它自动找到它，因为我有超过100个列表！）：

<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>

Answer 1

实现所需内容的最简单方法是使用jQuery＆＃39; filter()查找具有匹配li属性值的data-path，然后遍历DOM以查找其子i元素并切换所需的类。试试这个：

＆＃13;

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

＆＃13;

.fa-car {
  color: #C00;
}

＆＃13;

<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>

＆＃13;

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

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

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

Answer 2

＆＃13;

$("li[data-path='test']").each( function(){
    $(this).find('i.fa-list-ol').toggleClass('fa-list-ol requiredClass');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

$("li[data-path='test']").each( function(){
    $(this).find('i.fa-list-ol').removeClass('fa-list-ol').addClass('requiredClass');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

如何查找依赖于数据路径的元素并更改其中的类

2 个答案: