Question

这是一个关于将分区宽度与jquery匹配的问题。这是我正在使用的HTML代码。

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

我将使用“拇指”类有多个列表项。我想要做的是将div的宽度与类'caption'匹配到具有类'thumbs_image_container'的div的宽度，但是分别处理每个列表项。

有人可以给我一些关于如何做到这一点的指示吗？我知道如何匹配宽度，但我在确定如何单独处理每个列表项时遇到问题。

Answer 1

使用jQuery的each（Jquery $.each selector）

这段代码将获得带有类拇指的元素集，然后检查每个元素是否包含一个名为caption的类，如果该元素确实包含caption，那么它将使用class = thumbs_image_container获取元素的相关宽度并应用它到迭代元素。

$('.thumbs').each(function( location, element ){
 if( $(this).find('.caption').length){  
  var w = $(this).find('.thumbs_image_container')[0].width();
  $(this).width(w);
 }
});

Answer 2

尝试使用$.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
      }
});

Answer 3

感谢Sushanth和Travis，jquery各自都做了这个伎俩，经过实验，我最终得到的就是我想要做的事情，

$('li.thumbs').each( function() {
var $divWidth = 0;  
$divWidth = $(this).find('img').width(); 
$(this).find('div.caption').width($divWidth);
});

事实证明，我需要将图片的宽度与“标题”宽度相匹配。

感谢您的帮助

使用jquery匹配分区宽度

3 个答案: