0

こんにちは、私の Web ページでは、DOM 要素の一部が動的に生成され、マウスダウン イベントで DOM 要素のインデックス値を取得する関数を jquery で作成しました。しかし、私の関数は常に 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

のsthisに対するのインデックスを本当に見つけたいと思っていると思います。したがって、これを考えると：<div>.textLayer

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

クリックする<div>Pancakes</div>と、1 つ取得したいと思います。それが正しい場合は、次のようにハンドラーをバインドします。

$('#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これにより、要素の 1 つのセットに私たちthisとその兄弟が含まれるため、そのセットのindex(this)どこにあるかを調べるために使用できますthis。

もう 1 つのアプローチは、DOM を最も近い<div class="textLayer">usingに戻し、その中のclosestすべての<div>s をusing で取得しfindます。あなたのHTML構造のために、それは私たちに要素のセットを提供しsiblings、addそうすることができindex(this)ますthis.

<div class="textLayer">要素またはその中の sを追加および削除しても、どちらのアプローチも引き続き機能します<div>。

于 2012-05-11T07:17:43.633 に答える