javascript - 如何使用Javascript或Jquery选择两个特定列表项之间的所有列表项（li）

Question

下面是代码。包含多个列表项 (li) 的无序列表 (ul)

很少有 li 具有 role="none"。我想选择两个连续的 li.role="none" 之间存在的所有 li 元素。然后我想用 ul 标签包装那些 li 。

例如 1st li & 3rd li 有 role="none"。所以，第二个 li 应该用 ul 标签包裹。

<ul class="tl-unit-list tl-catalog-left-space" id="tl-course-info-units-list" role="none">
  <li role="none"><span class="label label-section" style="font-size: 14px;" role="heading" aria-level="3">Pre-assessment</span></li>
  <li>
    <a class="none-decoration tl-course-info-unit" href="javascript:void(0);"><i class="icon-ok tl-green-ok tl-icon16 tl-gray-icon" style="margin-right: 8px;"></i></a>
    <a href="https://dequeindia.talentlms.com/unit/viewtestsurvey/id:2076,mode:survey">Pre-assessment</a>
  </li>

  <li role="none"><span class="label label-section" style="font-size: 14px;" role="heading" aria-level="3">Web Accessibility</span></li>
  <li>
    <a class="none-decoration tl-course-info-unit" href="javascript:void(0);"><i class="icon-ok tl-green-ok tl-icon16 tl-gray-icon" style="margin-right: 8px;"></i></a>
    <a href="https://dequeindia.talentlms.com/unit/view/id:2053">Introduction</a></li>
  <li><i class="icon-video tl-icon16 tl-gray-icon tl-cursor-default" style="margin-right: 8px;"></i><a href="https://dequeindia.talentlms.com/unit/view/id:2054">What is web accessibility?</a></li>
  <li><i class="icon-test tl-icon16 tl-gray-icon tl-cursor-default" style="margin-right: 8px;"></i><span class="tl-disabled">Quiz</span></li>

  <li role="none"><span class="label label-section" style="font-size: 14px;" role="heading" aria-level="3">Disabilities</span></li>
  <li><i class="icon-video tl-icon16 tl-gray-icon tl-cursor-default" style="margin-right: 8px;"></i><span class="tl-disabled">Types of Disabilities</span></li>
  <li><i class="icon-doc-alt tl-icon16 tl-gray-icon tl-cursor-default" style="margin-right: 8px;"></i><span class="tl-disabled">Types of Disabilities - Personas</span></li>
  <li><i class="icon-doc-alt tl-icon16 tl-gray-icon tl-cursor-default" style="margin-right: 8px;"></i><span class="tl-disabled">Blind</span></li>
  <li><i class="icon-video tl-icon16 tl-gray-icon tl-cursor-default" style="margin-right: 8px;"></i><span class="tl-disabled">Low Vision</span></li>
  <li><i class="icon-doc-alt tl-icon16 tl-gray-icon tl-cursor-default" style="margin-right: 8px;"></i><span class="tl-disabled">Color Blindness</span></li>
  <li><i class="icon-test tl-icon16 tl-gray-icon tl-cursor-default" style="margin-right: 8px;"></i><span class="tl-disabled">Quiz</span></li>
  <li><i class="icon-doc-alt tl-icon16 tl-gray-icon tl-cursor-default" style="margin-right: 8px;"></i><span class="tl-disabled">Deaf</span></li>
  <li><i class="icon-doc-alt tl-icon16 tl-gray-icon tl-cursor-default" style="margin-right: 8px;"></i><span class="tl-disabled">DeafBlind</span></li>

  <li role="none"><span class="label label-section" style="font-size: 14px;" role="heading" aria-level="3">Guidelines</span></li>
  <li><i class="icon-doc-alt tl-icon16 tl-gray-icon tl-cursor-default" style="margin-right: 8px;"></i><span class="tl-disabled">Introduction</span></li>
  <li><i class="icon-video tl-icon16 tl-gray-icon tl-cursor-default" style="margin-right: 8px;"></i><span class="tl-disabled">Web Content Accessibility Guidelines (WCAG)</span></li>
  <li><i class="icon-video tl-icon16 tl-gray-icon tl-cursor-default" style="margin-right: 8px;"></i><span class="tl-disabled">Authoring Tool Accessibility Guidelines (ATAG)</span></li>
  <li><i class="icon-video tl-icon16 tl-gray-icon tl-cursor-default" style="margin-right: 8px;"></i><span class="tl-disabled">ARIA</span></li>

  <li role="none"><span class="label label-section" style="font-size: 14px;" role="heading" aria-level="3">Laws</span></li>
  <li><i class="icon-doc-alt tl-icon16 tl-gray-icon tl-cursor-default" style="margin-right: 8px;"></i><span class="tl-disabled">Introduction</span></li>
  <li><i class="icon-video tl-icon16 tl-gray-icon tl-cursor-default" style="margin-right: 8px;"></i><span class="tl-disabled">United States</span></li>
  <li><i class="icon-video tl-icon16 tl-gray-icon tl-cursor-default" style="margin-right: 8px;"></i><span class="tl-disabled">Canada</span></li>
  <li><i class="icon-video tl-icon16 tl-gray-icon tl-cursor-default" style="margin-right: 8px;"></i><span class="tl-disabled">Europe</span></li>
  <li><i class="icon-video tl-icon16 tl-gray-icon tl-cursor-default" style="margin-right: 8px;"></i><span class="tl-disabled">Other regions</span></li>

  <li role="none"><span class="label label-section" style="font-size: 14px;" role="heading" aria-level="3">Myths</span></li>
  <li><i class="icon-doc-alt tl-icon16 tl-gray-icon tl-cursor-default" style="margin-right: 8px;"></i><span class="tl-disabled">Introduction</span></li>
  <li><i class="icon-video tl-icon16 tl-gray-icon tl-cursor-default" style="margin-right: 8px;"></i><span class="tl-disabled">Myths</span></li>

  <li role="none"><span class="label label-section" style="font-size: 14px;" role="heading" aria-level="3">Summary</span></li>
  <li><i class="icon-doc-alt tl-icon16 tl-gray-icon tl-cursor-default" style="margin-right: 8px;"></i><span class="tl-disabled">Summary</span></li>
</ul>

标签： javascriptjquery

Answer 1

我尝试了以下步骤，并且成功了。

步骤1。在 Jquery 的帮助下，我为所有具有 role="none" 的列表项添加了一个唯一的 Id。例如 ：

       <li id="list-heading-0" role="none"><span class="label label-section" style="font-size: 14px;" role="heading" aria-level="3">Pre-assessment</span></li>
    

步骤：2：执行以下代码。遍历所有具有 role= none 的 List 项，然后使用 Jquery 的 nextUntil() 和 wrapAll() 方法。

      $('ul#tl-course-info-units-list > li[role="none"]').each(function(index,element) { 
         var counter = index; 
         var nextCounter = index+1;
         $('#tl-course-info-units-list li#list-heading-'+counter).nextUntil($('#tl-course-info-units-list li#list-heading-'+nextCounter)).wrapAll('<ul />');
      });