jquery 和 css 根据其他包装器中的 div 设置位置

Question

我有两个并排的包装 div。我想在右列中排列 div 以匹配左列中选择的 div 的位置。

在 fiddle 中，右列中的每个 div 应与左列中每隔一个 div 的顶部对齐。左侧每两个 div 应该有一个 div [x]。

它都是动态创建的，这就是为什么我按原样制作 fiddle 的原因 http://jsfiddle.net/sKZXJ/

HTML:

<!-- Extra height added because that seems part of the problem -->
<div style="height:60px;"></div>

<div id="scroller">
    <div id="wrapper1"></div>
    <div id="wrapper2"></div>
</div>

CSS:

#scroller {
    height:300px;
    width:60px;
    overflow-x:scroll;
}
#wrapper1 {float:left; width:15px;}
#wrapper2 {float:left; width:15px;}
.littleOne {
    margin-top:1px;
    position:relative;
    height:40px;
    background-color:#006600;
}
.littleTwo {
    margin-top:1px;
    position:relative;
    background-color:#00CCCC;
}

有趣的部分:

$(document).ready(function() {

    // Fill wrapper1 with divs
    for(var i=0;i<50;i++) {
        $('#wrapper1').append('<div id="a'+i+'" class="littleOne"></div>');
    }

    // Add selected divs to wrapper2 in matching positions
    var pos = 0;
    for(var i=0;i<50;i+=2) {
        $('#wrapper2').append('<div id="b'+i+'" class="littleTwo">X</div>');
        pos = $('#a'+i).position().top - $('#scroller').position().top;
        $('#b'+i).css('top', pos+'px');
    }

});

Answer 1

给你:http://jsfiddle.net/f5ArU/3/

$(document).ready(function() {

    // Fill wrapper1 with divs
    for(var i=0;i<50;i++) {
        $('#wrapper1').append('<div id="a'+i+'" class="littleOne"></div>');
    }

    // Add selected divs to wrapper2 in matching positions
    var pos = 0;
    var offset = 0;
    for(var i=0;i<50;i+=2) {
        var b = $('<div id="b'+i+'" class="littleTwo">X</div>');
        $('#wrapper2').append(b);
        pos = $('#a'+i).position().top - offset;
        offset += b.height() + 1;
        b.css('top', pos+'px');
    }

});