Get Index Of Parent Based On Child In Jquery

Currently the code below returns an array of visible parent/sibling div's with the class .one-third, but I need to find the position of the clicked article based on the returned ar

Solution 1:

Use .index() and pass in the selector of the elements it's relative to:

$(this).parent().index('div.one-third:visible')

jsFiddle example

Solution 2:

you can use .index() on the :visible elements with class of .one-third

$('.post').click(function() {
	var index = $('.one-third:visible > .post').index(this);
	console.log(index);
});

.one-third {
    width:33.3333333333333%;
    float:left;
}

.post {
    background:red;
    margin:5px;
    padding:5px;
    cursor:pointer;
}

.clear {clear:both;}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="one-third"><articleclass="post post-1320">post-1320</article></div><divclass="one-third"><articleclass="post post-1321">post-1321</article></div><divclass="one-third"style="display:none;"><articleclass="post post-1322">post-1322</article></div><divclass="one-third"style="display:none;"><articleclass="post post-1323">post-1323</article></div><divclass="one-third"><articleclass="post post-1324">post-1324</article></div><divclass="one-third"><articleclass="post post-1325">post-1325</article></div><divclass="one-third"><articleclass="post post-1326">post-1326</article></div><divclass="clear"></div>