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

时间:2019-01-29 13:11:12

标签: javascript jquery

我有这个列表:

<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。我的目标是获取data-question-id项之前的所有active

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

我可以使用以下代码轻松获得有效项:

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

但是如何获得active项目的所有上一项?

3 个答案:

答案 0 :(得分:2)

这是使用功能样式的纯JS的一种方法。

您使用属性data-question-id查询所有选择器。然后,将此数组映射到带有问题ID和一个布尔值的对象数组,该布尔值指示这些元素是否包含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>

答案 1 :(得分:1)

类似的东西吗?

var prevs = []
$(".tab-pane.active").each(function()
{
    if ($(this).attr('data-question-id') == active_id)
    {
        // Do something with previous elements

        prevs = null; // empty array
    }
    else if (prevs)
    {
        prevs.push($(this));
    }
})

答案 2 :(得分:1)

您可以使用一些内置的jQuery方法来实现输出。

.parent()

  

获取当前匹配元素集中每个元素的父元素,可以选择使用选择器进行过滤。

.prevAll()

  

获取匹配的元素集中每个元素的所有在前同级,可选地由选择器过滤。

.filter()

  

将匹配元素的集合减少为与选择器匹配或通过功能测试的元素。

.get()

  

检索与jQuery对象匹配的DOM元素

.map()如下所示:

var active_id = $('.active').parent().prevAll().filter(function() {
    return $(this).find('a').attr('data-question-id');
}).get().map(el => $(el).find('a').attr('data-question-id'));

console.log(active_id);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>