【问题标题】:jQuery loop find last data attribute with a value of true and add classjQuery循环查找值为true的最后一个数据属性并添加类
【发布时间】:2015-10-29 07:20:40
【问题描述】:

我有以下循环选择页面上的每个手风琴元素并检查数据属性是否为真(每个手风琴元素是过程中的一个步骤),如果数据属性为真,则应用活动类并手风琴被扩展。但是,我想将活动类应用于数据属性为 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">

【问题讨论】:

    标签: javascript jquery html


    【解决方案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');
    
    });
    

    【讨论】:

    • 谢谢,这完全符合预期。我尝试了.is:last,但无法让它工作。我错过了&amp;&amp;
    【解决方案2】:

    您应该使用attr函数获取属性'data-workspace-step-complete',然后检查值是否为真并执行相应的操作。

        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 = "true"。

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

    【讨论】:

    • 这会将活动类添加到数据属性为 true 的每个工作区步骤中,这与我的问题相同。我希望将活动类添加到值为 true 的最后一个数据属性。
    【解决方案3】:

    .last() 方法应该针对需要的元素:

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

    【讨论】:

      猜你喜欢
      • 2012-12-15
      • 2017-06-08
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2022-11-17
      • 1970-01-01
      相关资源
      最近更新 更多