jQuery循环查找值为true的最后一个数据属性并添加类

时间:2015-10-28 23:04:19

标签: javascript jquery html

我有以下循环选择页面上的每个accordion元素并检查data属性是否为true(每个accordion元素是进程中的一个步骤),如果data属性为true,则应用活动类和手风琴扩大了。但是,我想将活动类应用于data属性为true的最后一个元素。

jQuery:

var $steps = $('dd.accordion-navigation.workspace-step');

$steps.each(function () {

    var stepComplete = $(this).data('workspace-step-complete');

    if (stepComplete === true) {
        $(this).addClass('active')
            .find('.content')
            .addClass('active');
    }
});

HTML:

<dd class="accordion-navigation workspace-step" data-workspace-step-complete="true">
<!-- Apply active class to this step only -->
<dd class="accordion-navigation workspace-step" data-workspace-step-complete="true">
<dd class="accordion-navigation workspace-step" data-workspace-step-complete="false">
<dd class="accordion-navigation workspace-step" data-workspace-step-complete="false">
<dd class="accordion-navigation workspace-step" data-workspace-step-complete="false">

3 个答案:

答案 0 :(得分:1)

尝试使用属性等于选择器,:last选择器.is()

var $steps = $('dd.accordion-navigation.workspace-step');

$steps.each(function () {

    $(this).is("[data-workspace-step-complete=true]:last") &&    
    $(this).addClass('active')
    .find('.content')
    .addClass('active');

});

答案 1 :(得分:0)

您应该获得属性&#39; data-workspace-step-complete&#39;使用attr函数,然后检查value是否为true并执行相应的操作。

    var $steps = $('.accordion-navigation.workspace-step');
var i = -1;

$steps.each(function () {
    var stepComplete = $(this).attr("data-workspace-step-complete");
    if (stepComplete == "true") {
            i++;
        }    
});

i现在会给你最后一个元素的索引attr =&#34; true&#34;。

var LastElementwithTrue = $('.accordion-navigation.workspace-step').eq(1);

答案 2 :(得分:0)

.last()方法应该定位所需的元素:

$('[data-workspace-step-complete=true]').last().addClass('active')