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

Question

我正在使用以下 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。所以这就是我被困的地方。如果有人对如何做到这一点有其他建议，或者有其他方法可以做到这一点，我将不胜感激。

Answer 1

我猜这会很好。

$(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