Question

This is a question regarding matching division widths with jquery. Here is the html code I am working with.

<ul class="thumbs_container">
<li class="thumbs">
    <a class="fancybox" href="" >
        <div class="thumbs_image_container">
            <img src="" />
        </div>
        <div class="caption">
            caption
        </div>
    </a>
</li>
    <li class="thumbs">
    <a class="fancybox" href="" >
        <div class="thumbs_image_container">
            <img src="" />
        </div>
        <div class="caption">
            caption
        </div>
    </a>
</li>
</ul>

I will have multiple list items with the class ‘thumbs’. What I want to do is match the widths of the divs with the class ‘caption’ to the widths of the divs with the class ‘thumbs_image_container’, but treating each list item separately.

Could someone please give me some pointers on how to do this? I know how to match the widths, but I am having problems figuring out how to treat each list item separately.

Answer 1

Try using $.each()

var $ulWidth = $('thumbs_container').width();

$('li.thumbs').each( function() {

      var $divWidth = $(this).find('div.caption').width(); //Width of div inside Current li..

      if( parseInt($ulWidth) == parseInt($divWidth) ) {
           // Do Something
      }
});