选择孙子onclick事件

Question

我编写了一些jquery代码来选择div，该div是ID为pageContainer2的另一个div的孙子，用户单击了该id并显示带有索引值的警报消息。 但是代码根本无法正常工作，因此请查看我是否在编写代码错误或它们是否有其他问题。

以下是我的带有jquery脚本的html页面代码：

<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

有几个问题。

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演示 。

参考文献：

• $(document).ready() 。
• jQuery选择器 ， CSS（第2级）选择器和CSS（第3级）选择器 。
• index() 。

Answer 2

嗯， click事件根本不会绑定，因为textLayer是一个不是id的class ，而是您通过id选择的。

将选择器更改为：

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

还不清楚您不希望显示哪个索引，因为当前使用的索引将返回整个文档中特定div标签的索引。 如果您想在父级中建立索引，最好使用类似以下的方法：

var el = $(this);

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

Answer 3

将您的代码放在$(document).ready ，并将#textLayer更改为.textLayer hiteshtr，它可以正常工作，只需检查一下即可。

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

Answer 4

<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>​

小提琴