CODEWITHSUNDEEP
jquerydomdom-traversal
Tomkay
Tomkay

Reputation: 5160

JQuery - Determining parent index from its children

Good morning. I drink some more coffee to compensate the stress with this Javascript/jQuery problem.

basically its the opposite thing of this question: Determining child index in it's parent

The actual HTML (DOM)

<body>
<div id="content">
    <div class="contentbox">
        <div class="content">
            <h2>Image Gallery Header</h2>
            <div class="imageGallery">
                <div class="image">
                    <a href="javascript:void(0);" class="prevImg"><i class="sx028"></i></a>
                    <ul>
                        <li id="g2i1">
                            <img src="imgs/imageGallery1.jpg" alt="" width="505" height="298" />
                            <p>Image Caption...</p>
                        </li>
                        <li id="g2i2">
                            <img src="imgs/imageGallery2.jpg" alt="" width="505" height="298" />
                            <p>Image Caption...</p>
                        </li>
                    </ul>
                    <a href="javascript:void(0);" class="nextImg" title="nächstes Bild"><i class="sx029"></i></a>
                </div>
                <div class="thumbs">
                    <a href="javascript:void(0);" class="prevImg">&nbsp;</a>
                    <ul>
                        <li>
                            <img src="imgs/imageGallery1.jpg" alt="" width="149" height="88" />
                        </li>
                        <li>
                            <img src="imgs/imageGallery2.jpg" alt="" width="149" height="88" />
                        </li>
                    </ul>            
                    <a href="javascript:void(0);" class="nextImg">&nbsp;</a>
                </div>
            </div>
            <h2>Image Gallery Caption</h2>
            <p>
                Some text.
            </p>
        </div>

        <div class="content">
            <h2>Image Gallery Header</h2>
            <div class="imageGallery">
                <div class="image">
                    <a href="javascript:void(0);" class="prevImg"><i class="sx028"></i></a>
                    <ul>
                        <li id="g2i1">
                            <img src="imgs/imageGallery4.jpg" alt="" width="505" height="298" />
                            <p>Image Caption...</p>
                        </li>
                        <li id="g2i2">
                            <img src="imgs/imageGallery5.jpg" alt="" width="505" height="298" />
                            <p>Image Caption...</p>
                        </li>
                    </ul>
                    <a href="javascript:void(0);" class="nextImg"><i class="sx029"></i></a>
                </div>
                <div class="thumbs">
                    <a href="javascript:void(0);" class="prevImg">&nbsp;</a>
                    <ul>
                        <li>
                            <img src="imgs/imageGallery4.jpg" alt="" width="149" height="88" />
                        </li>
                        <li>
                            <img src="imgs/imageGallery5.jpg" alt="" width="149" height="88" />
                        </li>
                    </ul>            
                    <a href="javascript:void(0);" class="nextImg">&nbsp;</a>
                </div>
            </div>
            <h2>Image Gallery Caption</h2>
            <p>
                Some text.
            </p>
        </div>
    </div>
</div>
</body>

Thank you for reading that big pile.

Pseudo JQuery

$(".nextImg").click(function() { 
    var activeGallery = $(this).parents(".imageGallery").index();
    alert("You've clicked the next image button of image Gallery #" + activeGallery);
});

Result (alert message)

You've clicked the next image button of image Gallery #1 <-- if you clicked the ".nextImg" button of the ".imageGallery" with the index(); of 1

You've clicked the next image button of image Gallery #2 <-- if you clicked the ".nextImg" button of the ".imageGallery" with the index(); of 2

Question:

How do I "climb" up the parents of class="nextImage" to an element div class="imageGallery" and response the index of the div class"imageGallery" ?

Its really important for the last step of my gallery project. Thank you for any response!

Upvotes: 1

Views: 551

Answers (3)

clairesuzy
clairesuzy

Reputation: 27654

var activeGallery = $(this).closest(".content").index();

I think maybe this is what you're after, you have to go up another level, .content is the div which is indexed in scope of the whole doument, from there you can target it's child gallery

Upvotes: 0

kapa
kapa

Reputation: 78731

Something like

$(".nextImg").click(function() { 
    var $galleries=$('.imageGallery');
    var activeGallery = $galleries.index($(this).closest(".imageGallery"));
    alert("You've clicked the next image button of image Gallery #" + activeGallery);
});

activeGallery will tell you the index position of the current .imageGallery (the one that includes the link that was clicked) among all the .imageGallerys. This is zero-based, so you might want to +1 for human readability.

Upvotes: 3

x10
x10

Reputation: 3834

This is not what you asked for, but I think it's exactly what you need: 

$(".nextImg").click(function() { 
    var $activeGallery = $(this).closest(".imageGallery");
    // In here, you call methods on $activeGallery
});

http://api.jquery.com/closest/

Upvotes: 1

Related Questions