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

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

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

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

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

Answer 1

这是使用功能样式的纯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>

Answer 2

类似的东西吗？

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));
    }
})

Answer 3

您可以使用一些内置的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>

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

3 个答案: