Question

我正在设置一种“调试”页面，其中包含许多具有不同比例宽度的独特DIV（以百分比设置）。
我希望每个div都包含将显示包含div的宽度（以像素为单位）的文本，以实时响应视口的大小调整。

我是jQuery的新手，发现自己能够使用以下方式显示元素的宽度：

$('.show_width').html($(this).width());

但是，我显然做错了，因为这只能运作一次 - 而不是每一个独特的div。此外，我想为每个div添加"Width: ___px"之类的内容。

非常感谢任何帮助。感谢。

Answer 1

你需要使用$ .each循环遍历元素

 $(document).ready(function () {
     getWidths();
     $(window).resize(function() {
         getWidths();            
     });

     function getWidths() {
         $('.show_width').each(function() {
           $(this).html("");
           $(this).html($(this).html() + "<br />Width: " + $(this).width() + "px");
        });
     }
  });

Answer 2

如果我得到它，请使用resize事件回调函数：

  $(window).resize(function(){
         $('.show_width').each(function() {
             $(this).html($(this).width()+' * '+$(this).height());
          }
    });

显示包含DIV的宽度

2 个答案: