javascript - 如何在不计算隐藏元素的情况下获取索引？

Question

我正在尝试获取被点击元素的索引。到目前为止，这工作正常。

问题是您可以隐藏 元素。如果一个元素被隐藏，我不希望它在索引中被“计算”。

如果您查看 fiddle 并且所有框都是橙色的，则索引应该是这样的。如果您单击 Click me to hide some div - 它们不会被删除，实际上它们会得到一个 display:none; 在这里它们只是得到另一种颜色你的想法 - 他们也得到类 hidden 所以现在我不希望索引索引它们。但是如果我点击 Div 2 我希望索引显示 1

我已经尝试使用 $('div').not('hidden') fiddle here -> http://jsfiddle.net/rva54sy3/2/

<script>
(function($){
    var indexBoxes = function(e) {
        $element = $(this);
        var index = $element.not('.hidden').index();
        $( "h3.txt" ).text( "That was div index #" + index );
    }
    $(document).on( 'click', '.getIndex', indexBoxes);
})(jQuery);

$('.hide-some-divs').on('click',function(){
    $('.hide').addClass('hidden').closest('.wrap').addClass('hidden');
});
</script>

<h3 class="txt">Click a div!</h3>
<div class="wrap clearfix">
    <div class="getIndex">Div 0</div>
    <div class="getIndex hide">Div 1</div>
    <div class="getIndex">Div 2</div>
    <div class="getIndex hide">Div 3</div>
    <div class="getIndex">Div 4</div>
    <div class="getIndex hide">Div 5</div>
</div>

<div class="hide-some-divs">Click me to hide some divs</div>

如果你喜欢一些样式:

<style>
.getIndex {
    width:100px;
    height:100px;
    margin:5px;
    background-color:orange;
    float:left;
}
.wrap.hidden > div.hide {
    background-color:#fafafa;
}
.hide-some-divs {
    background-color:#afafff;
    padding:10px;cursor:pointer;
    margin:20px auto;
    width:250px;
    text-transform:uppercase;
    text-align:center;
}
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.clearfix { display: inline-block; }
</style>

多谢指教

Answer 1

可以这样获取索引

(function($) {
    var indexBoxes = function(e) {
        var index = $(".getIndex").not('.hidden').index(this);
        $("h3.txt").text("That was div index #" + index);
    }
    $(document).on('click', '.getIndex', indexBoxes);
})(jQuery);

这将是与您选择的列表相对应的给定元素的索引(与直接父级无关)。这里选择的元素列表是 .getIndex 类 div，它没有类名 .hidden

Fiddle