javascript - 在JavaScript/jQuery中匹配具有相似ID(＃thumb-1 ==＃project-1)的两个div的位置，而不是jQuery UI

我正在使用以下html构建投资组合图库：

<article class="work-gallery">
        <ul>
            <li id="project-1"><img src="http://placehold.it/50x00"></li>
            <li id="project-2"><img src="http://placehold.it/50x50"></li>
            <li id="project-3"><img src="http://placehold.it/50x50"></li>
        </ul>
</article>
        <div class="projects">
            <div id="detail-1" class="project-content project-1">Test</div>
            <div id="detail-2" class="project-content project-2">Test</div>
            <div id="detail-3" class="project-content project-3">Test</div>
        </div><!-- end .projects -->

设置页面加载时我想做的是将＃detail-1设置为与＃project-1的x / y坐标，＃project-2的＃detail-2匹配，等等。

这是我到目前为止的代码：

$(document).ready(function () {
    var thumb = $('.work-gallery li'),
        thumbId = thumb.attr('id'),
        thumbIdNumber = thumbId.substring(thumbId.indexOf('-') + 1, thumbId.length),
        thumbProject = $('#detail-' + thumbIdNumber);
    thumbProject.css({'top': thumb.position.top});
});

...但是在最后一条语句中，我没有指定thumb变量的ID。这就是我被困住的地方。如果有人对如何完成此操作或其他替代方法有其他建议，我将非常感激。

最佳答案

我想这样会很好。

$(document).ready(function () {
    $('.work-gallery li').each(function(){
        var elem = $(this),
            thumbId = elem.attr('id');
        $('#detail-' + thumbId.split('-')[1]).css({top: elem.position().top});
    });
});

JSFiddle