How do I get the index without counting hidden items?

I am trying to get the index of the clicked item. While it works.

The problem is that you can hide

items. If the item is hidden, I don't want it to be "counted" in the index.

If you look at the violin and the boxes are all orange, the index is as it should be. If you click on Click me to hide some divs

- they don't get deleted, they actually get display:none;

here, they just get a different color to give you an idea - they get a class as well hidden

, so now I don't know if you want the index to index them. But if I click on Div 2

I would like the index to show 1

I tried with $('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>

      

and if you like the style:

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

      

Thanks for the advice

+3


source to share


3 answers


You can get the index this way

(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);

      



This will be a pointer to the given item, corresponding to the list you selected (not associated with an immediate parent). Here's a selected list of .getIndex

class divs that has no class name.hidden

Fiddle

+5


source


You can use $ .inArray () to get the index of the clicked item from the visible items.

(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);

      



Here 's the fiddle link !

+1


source


If you really hide them, you can use:

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

      

The selector only counts elements with a class .getIndex

that are also visible (aka not display: none

)

However, this won't work with your example, because you are using a background color to "fake" them, hiding them.

0


source







All Articles