javascript - 根据特定值获取列表中的所有先前项目？

Question

我有这个列表:

<ul id="tabs-list" class="nav nav-pills">
   <li class="nav-item" style="width: 25%;"><a class="nav-link checked" href="#registry" data-toggle="tab"></a></li>
   <li class="nav-item" style="width: 25%;"><a class="nav-link checked" href="#tab1" data-toggle="tab" data-question-id="1"><i class="tim-icons icon-bulb-63"></i></a></li>
   <li class="nav-item" style="width: 25%;"><a class="nav-link checked active show" href="#tab2" data-toggle="tab" data-question-id="3"><i class="tim-icons icon-bulb-63"></i></a></li>
   <li class="nav-item" style="width: 25%;"><a class="nav-link" href="#tab3" data-toggle="tab" data-question-id="2"><i class="tim-icons icon-bulb-63"></i></a></li>
</ul>

如您所见，我有第三个元素 tab#2，它具有 active 类。我的目标是获取位于 active 项之前的所有 data-question-id。

输出应该是:["1"] 因为在 tab2 之前只有一个项目具有该属性。

我可以使用此代码轻松获取事件项目:

var active_id = Number($(".tab-pane.active").attr('data-question-id'));

但是我怎样才能得到 active 项的所有前一项呢？

Answer 1

这是一种使用函数式风格的纯 JS 的方法。

您查询所有具有属性 data-question-id 的选择器。然后将此数组映射到一个对象数组，其中包含问题 ID 和一个 bool 值，指示这些元素是否包含 active 类。

然后您找到第一个对象的索引 active = true 并且您对数组进行切片以获取所有先前的问题 id。

const questions = Array.from(document.querySelectorAll('a[data-question-id]'))
  .map(elem => ({
      id: elem.getAttribute('data-question-id'),
      active: elem.classList.contains('active')
   }));
  
const result = questions
    .slice(0, questions.findIndex(elem => elem.active))
    .map(elem => elem.id);
  
console.log(result)

<ul id="tabs-list" class="nav nav-pills">
   <li class="nav-item" style="width: 25%;"><a class="nav-link checked" href="#registry" data-toggle="tab"></a></li>
   <li class="nav-item" style="width: 25%;"><a class="nav-link checked" href="#tab1" data-toggle="tab" data-question-id="1"><i class="tim-icons icon-bulb-63"></i></a></li>
   <li class="nav-item" style="width: 25%;"><a class="nav-link checked active show" href="#tab2" data-toggle="tab" data-question-id="3"><i class="tim-icons icon-bulb-63"></i></a></li>
   <li class="nav-item" style="width: 25%;"><a class="nav-link" href="#tab3" data-toggle="tab" data-question-id="2"><i class="tim-icons icon-bulb-63"></i></a></li>
</ul>