0

你好，在我的网页中，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为viewer的div是静态的，里面的div是动态生成的

4

1 回答 1

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/

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

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

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

于 2012-05-11T07:17:43.633 回答