在jquery中滚动动态列表视图

Scroll dynamic listview in jquery

本文关键字:列表 视图 动态 滚动 jquery      更新时间:2024-03-06

我尝试动态滚动由创建的列表。我找到了这个答案,但对我没有帮助。我想这是因为我的列表是一个动态列表。我该怎么办?我想滚动选择值的动态列表。

这是我的密码:http://goo.gl/Tv7wvj这是我的代码

HTML

<div class="scroll order">
    <ul></ul>
</div>

CSS

.scroll{
    overflow-y: scroll;
    width:150px;
    height:80px;
}

Javascript

$(document).ready( function() {
    var html = '';
    for(i=0; i<10; i++){
        if(i==6){
            html += '<li> <label><input type="radio" name="radio" value="li'+i+'" checked="checked" /> 0'+i+' </label> </li>';
            continue;
        }
        html += '<li> <label><input type="radio" name="radio" value="li'+i+'" /> 0'+i+' </label> </li>';
    }
    $('ul').append(html);
});
var $s = $('.scroll');
var optionTop = $s.find('[value="04"]').offset().top;
var selectTop = $s.offset().top;
alert("optionTop : "+optionTop+" / selectTop :  "+selectTop);
$s.scrollTop($s.scrollTop() + (optionTop - selectTop));

(在评论中回答了问题。转换为社区wiki答案。)

@塔索斯写道:

它将如何找到value="aaaa"?????在您的列表中不存在的——请参阅jsfiddle.net/nn5fpmqa:

$(document).ready( function() {
    var html = '';
    for(i=0; i<10; i++){
        if(i==6){
            html += '<li> <label><input type="radio" name="radio" value="li'+i+'" checked="checked" /> 0'+i+' </label> </li>';
            continue;
        }
        html += '<li> <label><input type="radio" name="radio" value="li'+i+'" /> 0'+i+' </label> </li>';
    }
    $('ul').append(html);
});
setTimeout(function() {
var $s = $('.scroll');
var optionTop = $s.find('[value="li6"]').offset().top;
var selectTop = $s.offset().top;
alert("optionTop : "+optionTop+" / selectTop :  "+selectTop);
$s.scrollTop($s.scrollTop() + (optionTop - selectTop));
    }, 2000);