有没有一种方法可以检测到何时使用左浮置LI的UL更改了行？

Question

这是我拥有的产品的示例列表： http : //imgur.com/7IGthIa

我有一个可以在文档就绪状态下运行的函数，该函数循环遍历每个列表并调整img周围跨度的高度，以便整个列表的空间均匀。

我想知道的是，有没有一种方法可以检测到“行”何时更改，从而使跨度按原样显示在第一行上（因为它们根据前两行进行了适当的大小调整，但基于第二行，只有一个条目，跨度是那个图像的高度？

该函数对LI元素的高度执行相同的操作，如果有可行的解决方案，我可能会对其进行调整，以使其每行的大小相同。

如果有任何用途，它将运行此函数以计算高度：

if ( jQuery('.product_list').length ) {

    var tallest = 0;
    var tallest_img = 0;
    jQuery('.product_list li').each( function() {
        if ( jQuery(this).height() > tallest ) { tallest = jQuery(this).height(); }
        if ( jQuery(this).children('a').children('span').children('img').height() > tallest_img ) { 
            tallest_img = jQuery(this).children('a').children('span').children('img').height(); 
        }
    });
    jQuery('.product_list li').height( tallest );
    jQuery('.product_list li span').height( tallest_img );

}

谢谢！

Answer 1

您可以通过检查元素的offset().top来检测行何时更改。

由于您要在span上设置高度，因此我假设它们具有display: inline-block样式display: inline-block 。 （您不能设置内联元素的高度。）

由于span是li的子代，因此您不必担心设置li高度（除非我误解了您的问题）。

这段代码遍历span ，根据每行中最高的img给它们每行相等的高度：

function sizeSpans() {
  var spans= $('ul span'),
      tallest,
      top= $(spans[0]).offset().top;

  spans.css('height', '');
  tallest= $(spans[0]).height();

  spans.each(function(idx1) {
    if($(this).offset().top === top) {
      tallest= Math.max(tallest, $(this).height());
      spans.each(function(idx2) {
        if(idx2 <= idx1 && 
           $(this).offset().top === top
          ) {
          $(this).css('height', tallest);
        }
      });
    }
    else {
      tallest= $(this).height(),
      top= $(this).offset().top;
    }
  });
} //sizeSpans

您可以将其添加到resize处理程序中：

$(window).resize(sizeSpans);

工作小提琴

单击顶部的“ 大小跨度”按钮。 调整框架尺寸以查看尺寸调整。