在jquery中滚动动态列表视图

Posted 2023-05-09

【中文标题】在jquery中滚动动态列表视图

【英文标题】：Scroll dynamic listview in jquery

【发布时间】：2015-04-24 06:35:21

【问题描述】：

我尝试滚动动态制作的列表。 我找到了this answer，但对我没有帮助。 我想这是因为我的列表是一个动态列表。 我能怎么做？我想在选择值上滚动动态列表。

这是我的代码：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));

【问题讨论】：

究竟如何找到 value="aaaa" ?????列表中不存在的 --- 看看这个有效jsfiddle.net/nn5fpmqa

【参考方案1】：

(Question answered in the comments. Converted to a community wiki answer.)

@Tasos 写道：

它将如何找到 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);