Question

我已经编写了一些jquery代码来选择div，它是具有id pageContainer2的另一个div的孙子，用户点击该div并显示带索引值的警报消息。但代码是节点工作，所以请看我是否编写错误的代码或是否是他们的任何其他问题。

以下是我的带有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

有一些问题。

您似乎没有使用$(document).ready()事件，因此该事件不会绑定任何元素，因为它们尚未在DOM中。
您正在尝试找到div id="textLayer" class="textLayer"，但不存在index()。
您正在将选择器传递给this方法，此选择器应该定义要在其中查找此特定对象位置的元素。只有一个 each()元素（甚至jQuery的$(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); }); });方法一次与一个元素一起工作，从头到尾......）。所以删除那个特定的选择器。

所以，更正后的代码：

{{1}}

JS Fiddle demo

参考文献：

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

Answer 2

好吧，click事件根本没有绑定，因为textLayer是class而不是id，但您选择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>

FIDDLE

选择孙子onclick事件

4 个答案: