Jquery选择带有条件的下一个兄弟选项卡答案

【问题标题】：Jquery Select next sibling tab with conditionJquery选择带有条件的下一个兄弟选项卡
【发布时间】：2014-11-19 17:06:32
【问题描述】：

我目前有这个布局：

      _______________________________________________________
      |         X|         X|        X | <display:|        X |
 _____|__________|__________|          |___none>__|__________|_______________________
 |                                                                                   |
 |                                                                                   |
 |                                                                                   |

我的计划是，当我按下“X”时，标签会：

注入风格display: none;
打开下一个选项卡/激活下一个选项卡。

我目前正在使用 Jquery：

    $('.k-image').click(function () {
        $(this).parent().parent().css("display","none");
    });

“关闭”选项卡。即按“X”按钮关闭选项卡。

还有：

    $('#allocations').click(function (e) {
        $('.k-item').removeClass("k-state-active");
        $("[aria-controls=tabMain-2]").css("display", "initial");
    });

打开一个。

当我“关闭”一个选项卡时，我想要让“选项卡”和“内容”转到 下一个可用选项卡。这意味着遍历选项卡，找到“不显示：无”并显示它。

如何使用 Jquery 来实现（选择显示不是无的下一个兄弟和，如果它到达末尾，然后从头开始）？

请注意，我使用的是 Telerik tabstrip，所以这里是页面检查器的视图：

针对可见性问题，我创建了一个jsfiddle 以使生成的标记更易于阅读。

请注意

我可以关闭任何一个选项卡，它不必是我要关闭的活动选项卡。

【问题讨论】：

在 jquery 中使用 .after 并将其更改为活动 .. 或触发点击它
@Mohamed-Yousef 并没有真正回答我的问题 - 我正在寻找没有属性的 兄弟姐妹。我可以做剩下的

标签： jquery tabs telerik

【解决方案1】：

这可以改变：

$(this).parent().parent().css("display", "none");

到这里：

var $closed = $(this).closest(".k-item").css("display", "none");

一旦你拿到关闭的物品，使用.nextAll()函数：

var $next = $closed.nextAll(":visible:first");
if ($next.length === 0) {
    $next = $closed.siblings(":visible:first");
}

未测试，但我在这里试了一下：http://jsfiddle.net/salman/eu0fe7pv/1/

【讨论】：

【解决方案2】：

要使用 JQuery 获取兄弟姐妹，您有一些漂亮的选择器，例如 .next() 和 .prev()，它们应该对您有用。如果您想在最后一个选项卡关闭的情况下从第一个选项卡开始，还有.first()。

所以$(this).next() 应该为您提供直接跟在当前选定对象之后的项目。

如果您想进一步扩展它，还有像 .nextAll() 这样的函数，它将为您提供与选择匹配的每个同级，或 .nextUntil() 将在满足选择之前为您提供每个同级。

关于检查选项卡是否可见。有几种方法可以做到这一点。您可以使用函数.is() 来查看对象是否应用了类或样式。在你的情况下，你想要这样的东西：

if($(this).is(':visible')) { //Do something }

Here's a JSFiddle I made 这听起来像是你想要的。如果您只是想看看它的作用，这里还有一个 Code sn-p。

$('.box').click(function() {
    var self = $(this);
    
    self.slideToggle(); // Slose the box.
    $('.active').removeClass('active'); // Remove all instances of the active class.
    
    self.nextAll(':visible').first().addClass('active'); // Set the first sibling that's visible to active.
    
    if(self.html() === $('.box').last().html()){  // If it's the last box, start over.
        $('.box').first().addClass('active');
    }
});

.box {
    margin: 5px;
    font-size: 24px;
    float: left;
    width: 100px;
    height: 100px;
    background-color: blue;
}
.active {
    background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="box">1</div>
<div class="box">2</div>
<div class="box active">3</div>
<div class="box">4</div>
<div class="box">5</div>

【讨论】：