Получить индекс родителя на основе дочернего элемента в jQuery

Question

В настоящее время приведенный ниже код возвращает массив видимых родительских/дочерних div с классом .one-third, но мне нужно найти позицию щелкнутой статьи на основе возвращаемого массива. Например, пост-1320 будет иметь индекс 0, пост-1321 вернется 1, пост-1324 вернет 2 и т. Д.

Добавление .index('.'+unqiuePostClass[1]) в конец кода возвращает -1, поскольку оно не может найти класс.

HTML

<div class="one-third"> 
    <article class="post post-1320">post-1320</article> 
</div> 
<div class="one-third"> 
    <article class="post post-1321">post-1321</article> 
</div> 
<div class="one-third" style="display:none;"> 
    <article class="post post-1322">post-1322</article> 
</div> 
<div class="one-third" style="display:none;"> 
    <article class="post post-1323">post-1323</article> 
</div> 
<div class="one-third"> 
    <article class="post post-1324">post-1324</article> 
</div> 
<div class="one-third"> 
    <article class="post post-1325">post-1325</article> 
</div> 
<div class="one-third"> 
    <article class="post post-1326">post-1326</article> 
</div> 

<div class="clear"></div> 

JQuery

$('.post').click(function() { 
    var str = $(this).attr('class'); 
    var unqiuePostClass = str.split(" "); // unqiuePostClass[1] returns post-xxxx 
    var result = $('.'+unqiuePostClass[1]).parent().siblings('.one-third:visible').addBack(); 

    console.log(result); 

}); 

РЕЗУЛЬТАТ

0: div.one-third 
1: div.one-third 
2: div.one-third 
3: div.one-third 
4: div.one-third 

JSFiddle, который лучше demonstrat ых и моя проблема: http://jsfiddle.net/lustre/rtf5L0gv/5/

Answer 1

Использование .index() и передать в селекторе элементов это относительно:

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

jsFiddle example

Answer 2

вы можете использовать .index() на :visible элементов с классом .one-third

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

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

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

 
.clear {clear:both;}

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

 
<div class="clear"></div>