JQuery - 从子级确定父级索引

发布于 2024-11-03 20:36:15 字数 4761 浏览 0 评论 0原文

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

< strong>实际的 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 的下一个图像按钮 <-- 如果您单击“ “.imageGallery”的“.nextImg”按钮，带有index()； 1

您已单击图像库 #2 的下一个图像按钮 <-- 如果您使用 index() 单击“.imageGallery”的“.nextImg”按钮； 2

问题：

我如何“爬”到 class="nextImage" 的父元素到 div class="imageGallery" 和响应 div 类“imageGallery”的索引？

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

原文

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"> </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"> </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"> </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"> </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!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

杀お生予夺 2024-11-10 20:36:15

像 activeGallery这样的东西

$(".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);
});

会告诉您当前 .imageGallery （包含被单击的链接的那个）在所有 .imageGallery 中的索引位置>s。这是从零开始的，因此您可能需要 +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.

回复收藏 0 原文

日久见人心 2024-11-10 20:36:15

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

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

http://api.jquery.com /最近/

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/

回复收藏 0 原文

花海 2024-11-10 20:36:15

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

我想也许这就是你想要的，你必须上升到另一个级别，.content是在整个文档范围内索引的div，从那里你可以定位它的子画廊

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

回复收藏 0 原文

~没有更多了~