Question

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!

Answer 1

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.

Answer 2

这不是你要求做的事,但我认为这完全是你需要的:

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

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

Answer 3

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

友情链接