データパスに依存する要素を見つけてクラスを変更する方法

Question

JSを使用して、以下のセクションを検索し、クラスをfa-list-olからfa-carに変更したいと思います。どんな助けにも感謝！

PS：行きたい：data-path=testの場合を含むiクラスを見つけ、必須フィールドに変更してください。

私はJqueryまたはJSを使用できます。

： - それは私が幸せです（！私はこれは私はちょうど私が100以上のリストを持っているとして、それは自動それを見つけたいいけない今私いいえ、私は[3] <を持っている）

<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を作業することができます一度だけ

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

Answer 1

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

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

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

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

Answer 2

必要なものを達成するための最も簡単な方法は、その子i要素を検索し、必要なクラスを切り替えるには、DOMを横断した後、マッチングdata-path属性値でliを見つけるために、jQueryのfilter()を使用することです。私は目に見えるクラスの変更の影響を作るために<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>

注：これを試してみてください。

ます。また、属性セレクタを使用するようにjQueryを簡素化しますが、data attirbuteはDOMではなく、jQueryの内部キャッシュに設定されている場合にのみ動作します注意してください可能性が：

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