Question

我正在尝试获取clicked元素的索引。到目前为止，此工作正常。

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

如果你看一下这个小提琴，所有的盒子都是橙色，那么索引应该是这样的。如果你点击Click me to hide some divs - 他们就不会被删除，实际上他们会在这里获得display:none;他们只是得到另一种颜色来给你一个想法 - 他们也得到了班级{{1}所以现在我不希望索引索引它们。但是，如果我点击hidden，我希望索引显示 Div 2

我试过1小提琴 - ＆gt; http://jsfiddle.net/rva54sy3/2/

$('div').not('hidden')

如果你喜欢一些造型：

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

感谢您的建议

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

Answer 2

您可以使用$ .inArray（）从可见元素中获取被点击元素的索引。

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

这是a link to fiddle！

Answer 3

如果您实际隐藏它们，可以使用：

var index = $(".getIndex:visible").index(this);

选择器只计算具有类.getIndex的元素，这些元素也是可见的（又名display: none）

但是，这不适用于您的示例，因为您使用背景颜色“伪造”隐藏它们。

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

3 个答案: