選擇孫子onclick事件

Question

我已經寫了一些jQuery代碼來選擇另一個div的div的孫子，其ID爲pageContainer2，用戶單擊它並顯示帶有索引值的警報消息。但代碼是節點工作，所以請看看我是否寫錯了代碼或是他們的任何其他問題。

以下是我的html頁面的代碼與jQuery腳本：

<script> 
$("div#pageContainer2 div.textLayer div").click(function() { 
    // this is the dom element clicked 
    var index = $("div").index(this); 
    alert("index of div is = " + index); 
}); 
</script> 

<div id="pageContainer2" > 
<canvas id="page2" width="741" height="959"></canvas> 
<div class="textLayer"> 
<div>......some text here....</div> 
<div>......some text here....</div> 
<div>......some text here....</div> 
</div> 
</div> 

<div id="pageContainer3" > 
<canvas id="page3" width="741" height="959"></canvas> 
<div class="textLayer"> 
<div>......some text here....</div> 
<div>......some text here....</div> 
<div>......some text here....</div> 
</div> 
</div> 

Answer 1

<script type="text/javascript"> 
    $(function() { 
     $(".textLayer > div", "#pageContainer2").click(function() { 
      var index = $(this).index(); 
      alert("index of div is = " + index); 
     }); 
    }); 
</script> 

<div id="pageContainer2" > 
    <canvas id="page2" width="741" height="959"></canvas> 
    <div class="textLayer"> 
     <div>......some text here....</div> 
     <div>......some text here....</div> 
     <div>......some text here....</div> 
    </div> 
</div> 

<div id="pageContainer3" > 
    <canvas id="page3" width="741" height="959"></canvas> 
    <div class="textLayer"> 
     <div>......some text here....</div> 
     <div>......some text here....</div> 
     <div>......some text here....</div> 
    </div> 
</div>​ 

FIDDLE

Answer 2

好，click事件完全不綁定，因爲textLayer是class沒有id，但你通過id選擇。

更改選擇是：

$("div#pageContainer2 div.textLayer div") 

這也不清楚你wan't該指數顯示，因爲你當前使用將在整個文檔中返回特定div標籤的指數。如果你想在家長的索引，你最好使用類似的東西：

var el = $(this); 

var index = $('div', el.parent()).index(this); 
// Or 
var index = el.prevAll().length; 

Answer 3

有幾個問題。

1. 您似乎沒有被使用$(document).ready()事件，因此事件被綁定到任何元素，因爲它們在DOM是沒有。
2. 你試圖找到一個id="textLayer"div，不存在（你有class="textLayer"。
3. 你傳遞一個選擇的index()方法，這個選擇應該定義其中你想要的元素找到這個特定對象的位置。只有不斷一個this元素（甚至jQuery的each()法一個單元工作的時間，從第一個到最後...），所以刪除特定選擇。

所以，糾正代碼：

$(document).ready(
    function(){ 
    $("div#pageContainer2 div.textLayer div").click(function() { 
     // this is the dom element clicked 
     var index = $("div").index(); 
     alert("index of div is = " + index); 
    }); 
}); 

JS Fiddle demo

參考文獻：

• $(document).ready()。
• jQuery selectors，CSS (level 2) selectors和CSS (level 3) selectors。
• index()。

Answer 4

將您的代碼$(document).ready和hiteshtr這是工作，只要你想只檢查這一項改變#textLayer到.textLayer 。

$(document).ready(function() { 
    $("#pageContainer2 > .textLayer > div").click(function() { 
     // this is the dom element clicked 
     var index = $("#pageContainer2 > .textLayer > div").index(this); 
     alert("index of div is = " + index); 
    }); 
});