2

我实际上是在创建一个向导，其中包含 Web 应用程序上的选项卡和活动选项卡之前的选项卡将以一种方式（绿色）表示完成，而它之后的选项卡则以另一种方式表示未完成（灰色）。

在此处输入图像描述

<div class="tabContainer">
    <ul class='tabs'>
       <li><a href='#tab1'><span class="badge">1</span></a></li>
       <i class="icon-arrow-right"></i>
       <li><a href='#tab2'><span class="badge">2</span></a></li>
       <i class="icon-arrow-right"></i>
       <li><a href='#tab3'><span class="badge">3</span></a></li>
       <i class="icon-arrow-right"></i>
       <li><a href='#tab4'><span class="badge">4</span></a></li>
       <i class="icon-arrow-right"></i>
       <li><a href='#tab5'><span class="badge">5</span></a></li>
    </ul>
</div>

在我正在编写的自定义函数setTab()中，我传递了我想要激活的选项卡，然后尝试修改所有其他选项卡以具有上面指示的样式。

function setTab(tabId) {

        var $active, $content, $links = $('ul.tabs').find('a');

        // Make tab active
        $active = $($links.filter('[href="#tab'+tabId+'"]')[0] || $links[0]);
        $active.addClass('active');
        $active.find('span').addClass('badge btn-info');
        $content = $($active.attr('href'));

        // If Tab before, show as complete
        var previousTabs = $active.prevAll('a');
        previousTabs.removeClass('active');
        previousTabs.find('span').removeClass('btn-info').addClass('badge btn-success');

        // If Tab after, show as incomplete
        var nextTabs = $active.nextAll('a');
        nextTabs.removeClass('active');
        nextTabs.find('span').removeClass('btn-info').removeClass('btn-success');

        // Hide the remaining content
        $links.not($active).each(function () {
            $($(this).attr('href')).hide();
        });

        // Show Content
        $content.show();
    }

我正在寻找一种方法来检查元素是否在 jQuery中的prevAll()or命令的结果中。nextAll()

我试图用它来解决它$.inArray，$.each但没有太多运气。我猜第一个不起作用，因为结果集是一个对象，而不是一个数组。第二个不起作用，因为我需要将它与$.each函数内部不可用的元素进行比较。我敢肯定，经过足够的调整，我可以解决这个问题，但必须有更好的方法。

确定一个元素是否存在于另一个元素之前或之后的最佳方法是什么，如果它使用我一直在尝试的prevAllandnextAll方法，我该如何与该结果集进行布尔匹配？

4

4 回答 4

2

你可以使用index：

$('element').nextAll().index(el) != -1
于 2013-06-25T20:18:38.567 回答
2

如果您通过了选定的徽章，您可以通过将所有之前的徽章标记为“已完成”来避免所有这些。就像是：

var setTab = function (tabBadge) {
    tabBadge.prevAll('.badge').addClass('completed').removeClass('inProgress todo');
    tabBadge.addClass('inProgress').removeClass('completed todo');
    // ignore the addClass here if the gray badges are the default style
    tabBadge.nextAll('.badge').addClass('todo').removeClass('inProgress completed');
};

请注意，此功能与星级插件非常相似，这就是这个prevAll想法的来源。

于 2013-06-25T20:23:02.577 回答
1

比较循环内的原生 JS 元素：

var set  = $('element').nextAll(),
    elem = $('#someElement'),
    in_collection = false;

set.each(function() {
    if ( this === elem.get(0) ) in_collection = true;
});

或者您可以使用is()来检查集合中的任何元素是否与选择器匹配：

    var set  = $('element').nextAll(),
    elem = $('#someElement'),
    in_collection = set.is(elem);
于 2013-06-25T20:13:22.533 回答
0

使用各种答案的组合，我做了一些工作：

/**
* Set active tab and adjust other tabs in process
*/
function setTab(tabId) {

   var $active, $content, $links = $('ul.tabs').find('a');

   // Make tab active
   $active = $($links.filter('[href="#tab'+tabId+'"]')[0] || $links[0]);
   $active.addClass('active');
   $active.find('span').addClass('badge btn-info');
   $content = $($active.attr('href'));

   // If Tab before, show as complete
   var previousTabs = $active.parent().prevAll('li').find('a');
   previousTabs.each(function(index, el) {
      $(el).removeClass('active');
      $(el).find('span').removeClass('btn-info').addClass('badge btn-success');
   });

   // If Tab after, show as incomplete
   var nextTabs = $active.parent().nextAll('li').find('a');
   nextTabs.each(function(index, el) {
      $(el).removeClass('active');
      $(el).find('span').removeClass('btn-info').removeClass('btn-success');
   });

   // Hide the remaining content
   $links.not($active).each(function () {
      $($(this).attr('href')).hide();
   });

   // Show Content
   $content.show();

}

setTab(3);

看起来 DOM 让我很困惑……我需要提升一个级别。感谢所有伟大的答案！

于 2013-06-25T20:52:56.750 回答