Display width of containing DIV

Question

I'm setting up a sort of "debugging" page with a number of unique DIVs with different proportional widths (set in percentages).
I'd like each div to contain text that will display the containing div's width in pixels, responding live to resizing of the viewport.

I'm a relative new to jQuery and have found myself able to display an element's width using:

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

But, I'm clearly doing something wrong because this only works once - not on every unique div. Further, I'd like to add something like "Width: ___px" to each div.

Any help is much appreciated. Thanks.

Answer 1

you need to use $.each to loop through the elements

 $(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

If i get it, use resize event callback function:

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