3

質問Scroll to a specific element w/ jQueryを読みましたが、質問では、元の HTML コードには既に段落要素の ID があります。ただし、私の場合、動的に要素 (リスト要素) を生成し、実行時に ID を作成します。jQuery の有無にかかわらず、その特定の要素にスクロールするにはどうすればよいですか?

私の問題について詳しく説明するには：

iPhone で連絡先のリストを取得し、スクロール リスト (iscroll プラグインを使用) を div に表示する phonegap プロジェクトを作成しています。名を AE、FJ、KO、PT、UZ に分類し、グループ化します。ユーザーが横の FJ をタッチすると (iPhone の連絡先アプリにあるように)、div はグループ FJ に属する最初の連絡先にスクロールする必要があります。

<div id ="tablediv">
    <div id="scroller"></div>
</div>

<div id="sorter">
    <span id="gr1">A-E</span>
    <span id="gr2">F-J</span>
</div>

Javascript:

var g1 = ['a','b','c','d','e'];  //contact's first name starting with these chars
var g2 = ['f','g','h','i','j'];  //contact's first name starting with these chars
var idg1=null, idg2=null; // first id of the contact which was in g1, g2

//Array is an array of objects
//example: array = [ {'fname':'x','lname':'y','number':'123'},{..},{..}];

function generateTable(array) {
    gpDiv = document.getElementById("scroller");
    pDiv = document.createElement("ul");
    pDiv.id = "thelist";
    for(var i=0;i<array.length;i++) {
        cDiv = document.createElement("li");
        cDiv.id = 'cd'+i; //id created dynamically
        cDiv.textContent = array[i].fname+"\u000a"+array[i].lname;
        var ch0 = array[i].fname[0].toLowerCase();
        if($.inArray(ch0,g1)!=-1 && idg1==null) {
            idg1 = cDiv.id;
            document.getElementById('gr1').addEventListener('click',function(){goToG1(idg1);},false);
        }
        if($.inArray(ch0,g2)!=-1 && idg2==null) {
            idg2 = cDiv.id;
            document.getElementById('gr2').addEventListener('click',function(){goToG2(idg2);},false);
        }  
        pDiv.appendChild(cDiv);
    }
    gpDiv.appendChild(pDiv);
}

function goToG1(id) {
    $('#tablediv').scrollTop($('#'+id).offset().top);
}

function goToG2(id) {
    $('#tablediv').scrollTop($('#'+id).offset().top);
}

上記のコードは機能しません.IDは実行時に割り当てられるため、その特定の要素にスクロールすることはできません. 助けてください

4

2 に答える 2

10

うーん、私がする必要があったのはこれだけです。

function goToG1(id) {
    document.getElementById(id).scrollIntoView();
}

ID は実行時に割り当てられますが、まだ機能しているように見えます。

于 2012-11-16T08:51:51.380 に答える
0

あなたのコードは多かれ少なかれ機能しました-しかしあなたはコードを使用していました：

$("#tablediv").scrollTop(...)

それ以外の

$(document).scrollTop(...)

それ以外は機能します-ここを参照してください：http：//jsbin.com/umatuj/2/edit

于 2012-11-16T08:58:35.220 に答える