Get index of parent based on child in jQuery

Question

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 array. For example, post-1320 would have an index of 0, post-1321 would return 1, post-1324 would return 2 etc.

Adding .index('.'+unqiuePostClass[1]) to the end of the code returns -1 because it can't locate the class.

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

});

RESULT

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

A JSFiddle which better demonstrates my problem: http://jsfiddle.net/lustre/rtf5L0gv/5/

If you click on an article with class `.post` you determine the _unique_ post class of the clicked article and then you select all articles with this _unique_ class - which yields exactly the clicked article. Why the detour? — Andreas, Oct 13 '15 at 16:10

score 1 · Accepted Answer · answered Oct 13 '15 at 16:03

1

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

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

jsFiddle example

answered Oct 13 '15 at 16:03

j08691

204,283
31
260
272

score 0 · Answer 2 · answered Oct 13 '15 at 16:07

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

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

Get index of parent based on child in jQuery

2 Answers2

Linked