返回错误索引值的函数

function returning wrong index value

本文关键字：函数 索引值 错误 返回      更新时间：2023-09-26

你好在我的网页中 DOM 元素的某些部分是动态生成的我在 jquery 中创建了一个函数来获取鼠标关闭事件时 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 是动态生成的

我猜你真的想找到this的索引，关于<div>的.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/

siblings函数在侧面寻找与this深度相同的元素，然后我们使用add将this放入集合中;这给了我们this及其同级元素在一组元素中，因此我们可以index(this)找出this在该集合中的位置。

另一种方法是使用 closest 将 DOM 返回到最近的<div class="textLayer">，然后使用 find 抓取其中的所有<div>;对于您的 HTML 结构，这为我们提供了siblings和add执行的元素集，因此我们可以再次使用index(this)来找出this的位置。

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

相关文章：