Question

你好，在我的网页中，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是动态生成的

Answer 1

我猜你真的想在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函数看起来横向，然后我们使用add将this放入集合中。这为我们this及其兄弟姐妹提供了一组元素，因此我们可以使用index(this)找出该集合中this的位置。

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

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

函数返回错误的索引值

1 个答案: