javascript - 包含 DIV 的显示宽度

Question

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

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

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

但是，我显然做错了什么，因为这只适用于一次 - 而不是在每个唯一的 div 上。此外，我想"Width: ___px"为每个 div 添加类似的内容。

任何帮助深表感谢。谢谢。

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

如果我明白了，请使用调整大小事件回调函数：

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