1

早上好。我喝了更多的咖啡来弥补这个 Javascript/jQuery 问题带来的压力。

基本上它与这个问题相反：Determining child index in it's parent

实际的 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>

感谢您阅读那一大堆。

伪 JQuery

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

结果（警报消息）

您点击了图片库 #1 的下一个图片按钮<-- 如果您点击了带有 index() 的“.imageGallery”的“.nextImg”按钮；1 个

您点击了图片库 #2 的下一个图片按钮<-- 如果您点击了带有 index() 的“.imageGallery”的“.nextImg”按钮；2 个

问题：

如何将class="nextImage" 的父级“爬上”到元素div class="imageGallery"并响应div class"imageGallery"的索引？

这对于我画廊项目的最后一步非常重要。感谢您的任何回复！

4

3 回答 3

3

就像是

$(".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将告诉您当前.imageGallery（包括被点击的链接的那个）在所有.imageGallerys 中的索引位置。这是从零开始的，因此您可能希望 +1 以提高可读性。

于 2011-04-27T07:33:26.967 回答
1

这不是您要求的，但我认为这正是您所需要的： 

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

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

于 2011-04-27T07:32:57.950 回答
0 
var activeGallery = $(this).closest(".content").index();

我想也许这就是你所追求的，你必须再上一个层次，.content是在整个文档范围内索引的 div，从那里你可以定位它的子画廊

于 2011-04-27T07:38:32.107 回答