JQuery - 确定其子女的父索引

早上好。我喝了一些咖啡来补偿这个Javascript/jQuery问题带来的压力。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 <下一个图像按钮 - 如果你点击了”。索引（）;“.imageGallery”的“nextImg”按钮; 1

你点击的图像画廊＃2 <下一个图像按钮 - 如果你点击了“.imageGallery”与索引（）的“.nextImg”按钮; 2

问：

怎样 “爬” 上的类= “NEXTIMAGE”家长元素DIV CLASS = “imageGallery”和响应div的指数班级“imageGallery”？

它对我的画廊项目的最后一步非常重要。谢谢你的回应！

来源

2011-04-27 Tomkay

我已经做到了这一点，但我现在没有任何代码。尝试使用根节点中的.next（）方法。我会尝试并在稍后发布答案..还有其他你需要的东西 – ppumkin 2011-04-27 07:17:19

喜欢的东西

$(".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（包括点击链接的那个）在所有.imageGallery之间。这是基于零的，因此您可能需要为人类可读性+1。

来源

2011-04-27 07:33:26 kapa

玩得好先生，玩得很好... – Tomkay 2011-04-27 07:36:28

这不是你问什么，但我认为这正是你所需要的：

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

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

来源

2011-04-27 07:32:57 x10

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

我想，也许这就是你以后，你必须去再升一级，.content是在整个doument范围索引的DIV，从那里你可以针对它的子画廊

来源

2011-04-27 07:38:32 clairesuzy

如果在'.contentbox'中没有其他元素而不是'.content's。 – kapa 2011-04-27 12:10:01

JQuery - 确定其子女的父索引

回答

相关问题