Question

好吧，我正在运行ISOTOPE。所以我必须通过jQuery设置DIV的高度和宽度。这是一个摄影师的作品集，所以我有数千张不同尺寸的照片。

HTML

<div class="element  metal cesco1 " data-symbol="Hg" data-category="transition">
<span>
<a class="fancybox" href="fotos/full/full01.png" data-fancybox-group="gallery">
<img src="fotos/thumbs/thumb01.png"/>
</a>
</span>
</div>

<div class="element  metal cesco1 " data-symbol="Hg" data-category="transition">
<span>
<a class="fancybox" href="fotos/full/full03.png" data-fancybox-group="gallery">
<img src="fotos/thumbs/thumb03.png"/>
</a>
</span>
</div>

JavaScript的：

<script type="text/javascript">
var width = 0;
$('.cesco1 img').each(function() {
width += $(this).outerWidth( true );
alert(width);
});
$('.cesco1').css('width', width + 0);
</script>

我也在使用相同的JavaScript作为高度。第一个拇指宽度为300px，第二个拇指宽度为200px。所以我得到一个500px宽度的div.it加起来。我想设置每个DIV的宽度。我是新手，抱歉，如果这是愚蠢的。

Answer 1

使用.closest()方法访问包含图片的DIV。

$('.cesco1 img').each(function() {
    width += $(this).outerWidth( true );
    alert(width);
    $(this).closest('.cesco1').css('width', width);
});

如果图片始终是DIV的直接子项，则可以使用效率更高的选择器.cesco1 > img和.parent()代替.closest('.cesco1')。

Answer 2

试试这个：

<script type="text/javascript">
    $(function(){
        $('.cesco1').each(function() {
          var width = 0;
          $(this).children('img').each(function(){ 
              width += $(this).outerWidth( true );  // reset the width
          });
          $(this).css('width', width);
        });
    });
</script>

为具有相同类的每个div运行脚本

2 个答案: