jQuery检查Element是否在.prevAll（）或.nextAll（）的结果中

Question

我实际上是在创建一个带有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()或nextAll()命令的结果中。

我试图用$.inArray和$.each来解决这个问题，但运气不好。我猜第一个不起作用，因为结果集是一个对象，而不是一个数组。第二个不起作用，因为我需要将它与$.each函数中不可用的元素进行比较。我确信有足够的调整，我可以想出那一个，但必须有一个更好的方法。

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

Answer 1

您可以使用index：

$('element').nextAll().index(el) != -1

Answer 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');
};

请注意，此功能与star rating plugins非常相似，这是prevAll想法的来源。

Answer 3

比较循环中的原生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);

Answer 4

结合各种答案，我做了一些工作：

/**
* 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正在弄乱我......我需要上升一个级别。谢谢你们所有的精彩答案！