如何根据数据属性获取active div的索引
How to get the index of active div based on their data attributes
我想根据数据属性了解活动 div 的索引。
目前我使用以下方法获取已排序表的索引,但如果未排序,则无法使用:
var count = $(".active").index();
$( ".count" ).html( count + 1 );
<div id="wrapper">
<div class="data" data-foo="23"></div>
<div class="data" data-foo="653"></div>
<div class="data active" data-foo="5"></div>
<div class="data" data-foo="12"></div>
<div class="data" data-foo="0"></div>
</div>
<div class="count"></div>
尝试
var count = $.inArray($("[data-foo]").filter(".active").data("foo")
, $.map($("[data-foo]"), function(el, i) {
return Number(el.attributes["data-foo"].value)
}).sort(function(a, b) {
return a - b
}));
$(".count").html(count);
var count = $.inArray($("[data-foo]").filter(".active").data("foo"), $.map($("[data-foo]"), function(el, i) {
return Number(el.attributes["data-foo"].value)
}).sort(function(a, b) {
return a - b
}));
$(".count").html(count); // +1 ?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
<div class="data" data-foo="23"></div>
<div class="data" data-foo="653"></div>
<div class="data active" data-foo="5"></div>
<div class="data" data-foo="12"></div>
<div class="data" data-foo="0"></div>
</div>
<div class="count"></div>
我想根据数据属性了解活动 div 的索引。
目前我使用以下方法获取已排序表的索引,但如果未排序,则无法使用:
var count = $(".active").index();
$( ".count" ).html( count + 1 );
<div id="wrapper">
<div class="data" data-foo="23"></div>
<div class="data" data-foo="653"></div>
<div class="data active" data-foo="5"></div>
<div class="data" data-foo="12"></div>
<div class="data" data-foo="0"></div>
</div>
<div class="count"></div>
尝试
var count = $.inArray($("[data-foo]").filter(".active").data("foo")
, $.map($("[data-foo]"), function(el, i) {
return Number(el.attributes["data-foo"].value)
}).sort(function(a, b) {
return a - b
}));
$(".count").html(count);
var count = $.inArray($("[data-foo]").filter(".active").data("foo"), $.map($("[data-foo]"), function(el, i) {
return Number(el.attributes["data-foo"].value)
}).sort(function(a, b) {
return a - b
}));
$(".count").html(count); // +1 ?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
<div class="data" data-foo="23"></div>
<div class="data" data-foo="653"></div>
<div class="data active" data-foo="5"></div>
<div class="data" data-foo="12"></div>
<div class="data" data-foo="0"></div>
</div>
<div class="count"></div>