title: How to find a element dependant on data-path and change a class within
body: <p>I want to use JS to find the below section and change the class from <code>fa-list-ol</code> to <code>fa-car</code> but I cant seem to get it to change. Any help appreciated!</p>
  
  <p>PS: I want to go: If <code>data-path=test</code> then find the <code>i</code> class containing <code>fa-list-ol</code> and changing it to required field.</p>
  
  <p>I can use Jquery or JS. Just once it can work I am happy</p>
  
  <pre><code>&lt;li class="pl-folder" data-path="test"&gt;
      &lt;i class="fa fa-bars pl-action" data-toggle="modal" data-target="#modal-pl-menu-playlist" title="Actions"&gt;&lt;/i&gt;
      &lt;span&gt;
          &lt;i class="fa fa-list-ol"&gt;&lt;/i&gt;
          hello world
      &lt;/span&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>JS (Now i no i have [3] &lt;-- i dont want this i just want it to auto find it as i have over 100 lists!):</p>
  
  <pre><code>var attrValue = document.getElementsByName('pl-folder')[3].getAttribute("data-path");
  if (attrValue == "test") {
      document.getElementsByName('pl-folder')[3].className = "fa fa-car";
  }
  </code></pre>