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 - 確定其子女的父索引

回答

相關問題