选择孙子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); 
    }); 
});