javascript - 尝试在某个类上执行每个功能

Question

嘿，社区，我在框架中对图片进行居中处理，因此尽管图像大小，图像的中心仍位于框架的中心。 (框架固定)

 $('.item-box').each(function () {
    var fwidth = $('.gmask').width();
    var iwidth = $('.gmask img').width();
    var fheight = $('.gmask').height();
    var iheight = $('.gmask img').height();

    $('.gmask img').css('margin-left', Math.floor((fwidth - iwidth) / 2) - 3);
    $('.gmask img').css('margin-top', Math.floor((fheight - iheight) / 2) - 3);
});

我想为我的每个“.item-box”做一个循环 谁能告诉我我做错了什么

*编辑

顺便说一句，我正在做 jquery 模板

<script id="resultTemplate" type="text/x-jquery-tmpl "> 
    {{for Product}}

    <div class="item-box" id="{{if #index < 5 }}itemboxTeaser{{else}}itemboxRest{{/if}}{{:#index+1}}">
        <div class="visual-gallery">
            <div class="gmask">
                <ul class="replaceClass">
                    <a href="/lejemaal/{{:Urlname}}/#/Lejemaal">
                        <img src="{{:PhysicalPathToFrontPhotoUseWebFront300Px}}" alt="">
                    </a>
                </ul>
            </div>
        </div>
     </div>
     {{/for}}
</script>

Answer 1

我想 .gmask 和它的相关 img 是 $(this) 的 child (你的 .item-box)
像这样尝试:

$('.item-box').each(function () {
        var $gmask = $(this).find('.gmask');
        var $gmaskImg = $gmask.find('img');

        var fwidth = $gmask.width();
        var iwidth = $gmaskImg.width();
        var fheight = $gmask.height();
        var iheight = $gmaskImg.height();

        $gmaskImg.css('margin-left', Math.floor((fwidth - iwidth) / 2) - 3);
        $gmaskImg.css('margin-top', Math.floor((fheight - iheight) / 2) - 3);
});

阅读 OP 评论后编辑

$(window).load(function(){
    $('.item-box').find('.gmask').each(function () {
            var $gmask = $(this);
            var $gmaskImg = $gmask.find('img');

            var fwidth = $gmask.width();
            var iwidth = $gmaskImg.width();
            var fheight = $gmask.height();
            var iheight = $gmaskImg.height();

            $gmaskImg.css('margin-left', Math.floor((fwidth - iwidth) / 2) - 3);
            $gmaskImg.css('margin-top', Math.floor((fheight - iheight) / 2) - 3);
    });
});