CODEWITHSUNDEEP
jqueryhtml
Syed Mahfuzul Mazid
Syed Mahfuzul Mazid

Reputation: 91

how to get child div index of a parent div. if there are several parent div with same class

I have three parent div class as inner_box2. each of parent div contains more than five child div with class name inner_box_items.

On click the child div's span it should return child div index/position inside the parent div. that is I have to click in the span inside the div.inner_box_items and it should return div.inner_box_items position inside inner_box2

`

<div class="inner_box2">
   <div class="inner_box_items"><span>View Position</span></div>
   <div class="inner_box_items"><span>View Position</span></div>
   <div class="inner_box_items"><span>View Position</span></div>
   <div class="inner_box_items"><span>View Position</span></div>
</div>

<div class="inner_box2">
   <div class="inner_box_items"><span>View Position</span></div>
   <div class="inner_box_items"><span>View Position</span></div>
   <div class="inner_box_items"><span>View Position</span></div>
</div>

<div class="inner_box2">
   <div class="inner_box_items"><span>View Position</span></div>
   <div class="inner_box_items"><span>View Position</span></div>
   <div class="inner_box_items"><span>View Position</span></div>
   <div class="inner_box_items"><span>View Position</span></div>
   <div class="inner_box_items"><span>View Position</span></div>
   <div class="inner_box_items"><span>View Position</span></div>
   <div class="inner_box_items"><span>View Position</span></div>
</div>

`

trying like below. but not working..

var xyz=$(this).parents('.inner_box2').closest('.inner_box_items').index('.inner_box_items');

Upvotes: 0

Views: 1211

Answers (3)

chroda
chroda

Reputation: 11

@pmandell done well, here's a fiddle http://jsfiddle.net/sA89N/1/

        function cl(param){if(window.console && window.console.log){console.log(param);}}

        $(document).ready(function(){

            $('.inner_box_items span').click(function() {
                cl($(this).parent().index());
            });
        });

Upvotes: 0

Rofhiwa Sikhauli
Rofhiwa Sikhauli

Reputation: 11

To get the index of the div.inner_box_items after clicking span inside it, do like this: 

$(".inner_box_items").each(function(){
   $(this).children("span").click(function(){
     alert($(this).closest(".inner_box_items").index());
   })       
})

Upvotes: 0

pmandell
pmandell

Reputation: 4328

$('.inner_box_items').click(function(){
    console.log( $(this).index() ); 
    //logs the index of the element relative to its parent
});

Here is a working example which displays the index of the clicked element.

UPDATE: Question has been updated, and now wants to get the index of the parent .inner_box_items when the child span is clicked.

$('.inner_box_items span').click(function() {
    var parentIndex = $(this).parent().index();
});

Upvotes: 1

Related Questions