OnClick добавить/удалить элементы Li активного класса

Question

У меня есть следующий сценарий, и это, кажется, работает только один путь:

initDownloadVersionSwitch: function() { 
     $(document).on("click", ".download-version-list li:not(.active)", function() { 
      var i = $(this), 
       t = i.parent(), 
       o = t.prev(".download-version-items"), 
       n = i.index(); 
      t.find("li").removeClass("active"), i.addClass("active"), o.find("li").removeClass("active"), o.find("li:eq(" + n + ")").addClass("active") 
     }) 
    }, 

Это хорошо добавляет/удаляет активный класс на «скачать-версию-лист» li, но только удаляет/добавляет активный класс к первой строке «download-version-items».

Любые идеи, в которых я ошибаюсь?

С наилучшими пожеланиями,

Marc

По желанию:

<div class="row"> 
     <ul class="download-version-items grid grid-4-col"> 
      <?php foreach ($content->firmwares as $x => $item): ?> 
       <li class="download-item<?php echo $x === 0 ? ' active' : ''; ?>"> 
        <h3 class="thin"><?php echo $item['title']; ?></h3> 
        <small class="download-publication"><?php __("downloads.label.publication_date"); ?>: <?php echo $item['release_date']; ?></small> 
        <span class="download-text-title"><?php __("downloads.label.versionnumber"); ?>: <?php echo $item['version']; ?></span> 
        <div> 
         <?php echo $item['description']; ?> 
        </div> 
        <div class="center-button"> 
         <a class="btn-license button gradient-button" href="<?php echo $item['file_url']; ?>" 
         <?php if ($item['license_enabled']){echo 'data-license="'.Router::url('/modalboxes/gnugpl/notice/firmware?uri='.$item['file_url']).'"';}; ?> 
         > 
          <span><?php __("downloads.firmware.button.download"); ?><small></small></span> 
      </a> 
        </div> 
       </li> 
      <?php endforeach; ?> 
     </ul> 
     <ul class="download-version-list grid grid-4-col"> 
      <?php foreach ($content->firmwares as $x => $item): ?> 
       <li class="<?php echo $x === 0 ? ' active' : ''; ?>"> 
        <span class="download-version-title"><?php __("downloads.label.versionnumber"); ?> <?php echo $item['version']; ?></span> 
        <small><?php echo $item['release_date']; ?></small> 
       </li> 
      <?php endforeach; ?> 
     </ul> 
    </div> 

Чистый HTML ВЫВОД:

<div class="row active"> 
<ul class="download-version-items grid grid-4-col"> 
    <li class="download-item active"> 
     <h3 class="thin">Firmware 2.6</h3> <small class="download-publication">Publication date : 18 January 2016</small> <span class="download-text-title">Version number : 2.6</span> 
     <div> 
      <p><strong>Changed:</strong></p> 
      <ol> 
       <li class="">Add timeout to check DNS alive</li> 
       <li class="">Add procedure to verify ipv4 and ipv6 on ppp session</li> 
      </ol> 
      <p><strong>Fixed:</strong></p> 
      <ol> 
       <li>Fix security issue of NetUSB</li> 
       <li>Fixed Apple iOS 9 login issue with the MyWiFi app.</li> 
      </ol> 
     </div> 
     <div class="center-button"> 
      <a class="btn-license button gradient-button" href="http://domain.com/download/firmware/2747"> <span>Download firmware <small></small></span> </a> 
     </div> 
    </li> 
    <li class="download-item"> 
     <h3 class="thin">Firmware 2.4</h3> <small class="download-publication">Publication date : 11 November 2015</small> <span class="download-text-title">Version number : 2.4</span> 
     <div> 
      <p>Show the information of guest network clients on DHCP Status page</p> 
     </div> 
     <div class="center-button"> 
      <a class="btn-license button gradient-button" href="http://domain.com/download/firmware/2658"> <span>Download firmware <small></small></span> </a> 
     </div> 
    </li> 
    <li class="download-item"> 
     <h3 class="thin">Firmware 2.1</h3> <small class="download-publication">Publication date : 19 February 2015</small> <span class="download-text-title">Version number : 2.1</span> 
     <div> 
      <p>WLR-8100v1-001</p> 
      <p>Firmware 2.1 
       <br> (1) &nbsp; &nbsp;Added support for Mobile App</p> 
      <p>Firmware 1.5 
       <br> (1) &nbsp; &nbsp;Modified DHCP Client list table 
       <br> (2) &nbsp; &nbsp;Allow Manual DNS Servers on WAN side</p> 
      <p>Firmware 1.3 
       <br> (1) &nbsp; &nbsp;Add Apple AirPrint support</p> 
      <p>Firmware 1.2 
       <br> (1) &nbsp; &nbsp;DLNA server now supports 10000 files instead of 1000 
       <br> (2) &nbsp; &nbsp;Fixed some WPS PIN code issues 
       <br> (3) &nbsp; &nbsp;Improved Samba server compatibitity</p> 
      <p>Firmware 1.0&nbsp; 
       <br> The first official released firmware for WLR-8100.</p> 
     </div> 
     <div class="center-button"> 
      <a class="btn-license button gradient-button" href="http://domain.com/download/firmware/611" data-license="http://domain.com/modalboxes/gnugpl/notice/firmware?uri=http://domain.com/download/firmware/611"> <span>Download firmware <small></small></span> </a> 
     </div> 
    </li> 
</ul> 
<ul class="download-version-list grid grid-4-col"> 
    <li class="active"> <span class="download-version-title">Version number 2.6</span> <small>18 January 2016</small> </li> 
    <li class=""> <span class="download-version-title">Version number 2.4</span> <small>11 November 2015</small> </li> 
    <li class=""><span class="download-version-title">Version number 2.1</span> <small>19 February 2015</small> </li> 
</ul> 

Answer 1

Ваш код не работает, потому что когда вы выбираете второй элемент li в списке загрузки-версии, это следующий элемент li в элементах загрузки-версии.

<li class="">Add timeout to check DNS alive</li> 

Если выбран литий не в ола, он будет работать

o.find('li').not('ol li').eq(n).addClass("active") 

https://jsfiddle.net/wLfyfjra/1/

Примечание: Было бы лучше и надежнее указать классы здесь, а не HTML элементов, потому что вы есть много элементов content/html в li здесь, что предотвратит что-то подобное в будущем.