0

我已经编写了一些 jquery 代码来选择 div，该 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>
4

4 回答 4

2

有几个问题。

  1. 您似乎没有使用$(document).ready()事件，因此该事件未绑定到任何元素，因为它们尚未在 DOM 中。
  2. 您正在尝试查找不存在的divof （您有.id="textLayer"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 演示。​</p>

参考：

于 2012-04-16T12:00:18.943 回答
1

好吧，click事件根本没有绑定，因为textLayer它是classnot id，但您选择 by id。

将选择器更改为：

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

也不清楚您不想显示哪个索引，因为您当前使用的将返回div整个文档中特定标签的索引。如果您想在父级中使用索引，则最好使用以下内容：

var el = $(this);

var index = $('div', el.parent()).index(this);
// Or
var index = el.prevAll().length;
于 2012-04-16T11:58:26.167 回答
1

将您的代码放入$(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);
    });
});
于 2012-04-16T12:08:35.717 回答
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>​

小提琴

于 2012-04-16T12:17:13.753 回答