函数返回错误的索引值

时间:2012-05-11 05:37:09

标签: javascript jquery

你好,在我的网页中,DOM元素的某些部分是动态生成的 我在jquery中创建了一个函数来获取mousedown事件中DOM元素的索引值。但我的功能总是返回7。 这是我的dom结构和功能代码:

<div id = "viewer">
<div id="pageContainer1" >
    <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="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>​
</div>

<script>
    var indexInital, pageStr, containerStr, selector;
    //function for highlighting
    $(function() {
    $(window).scroll(function(){
        pageStr = String(PDFView.page);
        containerStr = "\"#pageContainer".concat(pageStr);
        selector = containerStr.concat(" > .textLayer > div\"");    
        });
});

    $(function() {
    $('#viewer').on('mousedown', selector ,function () {   
       indexInitial = $(this).index();
       console.log(indexInitial);   });
});

</script>

在上面的代码中,只有id查看器的div是静态的,其中的div是动态生成的

1 个答案:

答案 0 :(得分:3)

我猜你真的想在this中找到关于<div> s的.textLayer索引。所以这个:

<div class="textLayer">
    <div>......some text here....</div>
    <div>Pancakes</div>
    <div>......some text here....</div>
</div>

如果你点击<div>Pancakes</div>,你想要一个。如果这是正确的,那么你想要像这样绑定你的处理程序:

$('#viewer').on('mousedown', '.textLayer div', function() { /* ... */ });

您可以完全丢弃selector变量。然后,在处理程序内部,您可以这样做:

$(this).siblings().add(this).index(this);

获取this的本地索引,或者你可以这样做:

$(this).closest('.textLayer').find('div').index(this);

演示:http://jsfiddle.net/ambiguous/U97DG/

对于与this相同深度的元素,siblings函数看起来横向,然后我们使用addthis放入集合中。这为我们this及其兄弟姐妹提供了一组元素,因此我们可以使用index(this)找出该集合中this的位置。

另一种方法是使用closest将DOM备份到最接近的<div class="textLayer">,然后使用find抓取其中的所有<div>;对于您的HTML结构,它为我们提供了siblingsadd所做的一系列元素,因此我们可以再次使用index(this)来找出this的位置。

当您添加和删除<div class="textLayer">元素或其中的<div>时,这两种方法都将继续有效。