我有这个列表:
<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
项目的所有上一项?
答案 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方法来实现输出。
获取当前匹配元素集中每个元素的父元素,可以选择使用选择器进行过滤。
获取匹配的元素集中每个元素的所有在前同级,可选地由选择器过滤。
将匹配元素的集合减少为与选择器匹配或通过功能测试的元素。
检索与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>