尝试在某个类上执行每个函数
trying to do each function on a certain class
嘿,社区正在对一个框架中的图片进行居中处理,因此无论图像大小,图像的中心都在框架的中心。(帧固定)
$('.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);
});
我想对我的每个".项目框"都做一个循环,有人能告诉我做错了什么吗
*编辑
顺便说一句,我正在做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>
我假设.gmask
和它的相对img
是$(this)
(您的.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);
});
});
我想你想把图像放在每个.item框的中心,所以你需要参考"this":
$('.item-box').each(function () {
var fwidth = $(this).find('.gmask').width();
var iwidth = $(this).find('.gmask img').width();
var fheight = $(this).find('.gmask').height();
var iheight = $(this).find('.gmask img').height();
$(this).find('.gmask img').css('margin-left', Math.floor((fwidth - iwidth) / 2) - 3);
$(this).find('.gmask img').css('margin-top', Math.floor((fheight - iheight) / 2) - 3);
});
这些行取页面的第一个元素,不管当前的是什么。item框:
var fwidth = $('.gmask').width();
var iwidth = $('.gmask img').width();
var fheight = $('.gmask').height();
var iheight = $('.gmask img').height();
您需要执行$(this).find('.element');
既然img就是你想要的,为什么不在这些元素上进行.each
循环呢?
$('.item-box .gmask img').each(function ()
{
var parent, fwidth,fheight,iwidth,iheight;
parent = $(this);
while(!parent.attr('class').match(/'bgmask'b/))
{//get the .gmask parent of current img
parent = parent.parent();
}
iwidth = $(this).width();
iheight = $(this).height;
fwidth = parent.width();
fheight = parent.height();
$(this).css('margin-left', Math.floor((fwidth - iwidth) / 2) - 3);
$(this).css('margin-top', Math.floor((fheight - iheight) / 2) - 3);
});
这减少了选择器的使用量,从而提高了整体性能。IMHO,它也更容易阅读和维护。
相关文章:
- 如何做到这一点,使代码在不传递条件后执行函数
- javascript自执行函数-不同的语法
- JavaScript:只有当数组中的所有项都为true时才执行函数
- iFrame url更改时执行函数
- 为什么AngularJS在每个摘要循环上都执行函数
- 如何使用setInterval执行函数
- 当*ngFor以角度2结束时执行函数
- Ajax调用完成后如何执行函数
- 在显示引导弹出窗口之前执行函数
- 从自执行函数返回函数的Javascript性能命中率
- 在操作完成时执行函数
- jquery/js中的自执行函数
- 如何仅在完成对gap.client.youtube的请求.execute后执行函数
- 构造函数函数中的自执行函数的OO上下文/范围
- Javascript未使用=运算符执行函数
- AngularJS:如何按照预定义的顺序执行函数
- 在不使用隔离作用域的情况下执行函数的角度指令
- 如何在页面加载后执行函数是在 AngularJS 中完成的
- 完成页面加载后执行函数
- 如何在完成完全执行函数后触发循环