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

How to get index without counting the hidden elements?

本文关键字：情况下 获取 索引 元素 隐藏 计算      更新时间：2023-09-26

我正在尝试获取点击元素的索引。到目前为止，这还可以。

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

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

我在这里试过$('div').not('hidden')小提琴->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>

感谢您的建议

您可以通过这种方式获得索引

(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

您可以使用$.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);

这是小提琴的链接！

如果你真的要隐藏它们，你可以使用：

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

选择器只对类别为.getIndex的元素进行计数，这些元素也是可见的（也称为非display: none）

然而，这对您的示例不起作用，因为您使用背景色来"伪造"隐藏它们。

相关文章：