Question

我目前有这种布局：

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

我的计划是当我按下＆＃39; X＆＃39;时，标签是：

注入样式display: none;
打开下一个标签/生成下一个标签。

我目前正在使用Jquery：

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

关闭＆＃39;标签.I.e。按下＆＃39; X＆＃39;按钮关闭选项卡。

和

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

打开一个。

我想要的是＆＃39;标签＆＃39;和＆＃39;内容＆＃39;当我关闭＆＃39;时，转到下一个可用标签一个标签。这意味着循环选项卡，找到哪个不显示：无＆＃39;并显示它。

如何使用Jquery实现这一目标（选择下一个兄弟，其中显示不是没有和，如果它到达终点，然后从头开始）？

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

enter image description here

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

请注意

我可以关闭标签，它不一定是我关闭的有效标签。

Answer 1

要使用JQuery获取兄弟姐妹，您有一些非常棒的选择器，例如.next()和.prev()应该对您有用。如果你想在第一个标签页面上开始，如果最后一个标签页已关闭，那么还有.first()。

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

如果你想进一步扩展它，还有像.nextAll()这样的函数可以为你提供与选择相匹配的每个兄弟，或.nextUntil()这将给你每个兄弟，直到满足选择

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

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

Here's a JSFiddle I made听起来就像你想要的那样。如果你只是想知道它的作用，那么这里也是一个代码片段。

＆＃13;

$('.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');
    }
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

可以改变：

$(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/

Jquery选择具有条件的下一个兄弟选项卡

2 个答案: