编写行中最高的标题

Question

我有这种类型的catаlog，它是用li和float制作的：左边。如何从字符串中选择产品的最高标题。例如，我有2个产品串，第一行中最高的标题有2个文本字符串，这意味着该字符串中的所有标题应该等于最高标题的高度，在第二行中最高标题有3个文本字符串，即表示该字符串中的所有标题都应该等于高度为3的字符串，即使它有1个字符串

这是我的标记click

<ul class="b-products__list">
   <li class="b-product">
    <div class="b-product__img-wrap"><a href="" class="b-product__img-link" title="товар"><img src="_mod_files/ce_images/product-1.jpg" alt="" class="b-product__img"></a></div>
    <h3 class="b-product__title"><a href="" class="b-product__link">Интеллектуальные вентиляторы вентиляторы</a></h3>
   </li>
   <li>...</li>

我有一个类似的脚本，但它没有查看行

function setEqualHeight(columns)
{var tallestcolumn = 0;
columns.each(
function()
{currentHeight = $(this).height();
if(currentHeight > tallestcolumn)
{tallestcolumn = currentHeight;}
});
columns.height(tallestcolumn);
}

Answer 1

您可以选择HTML和CSS。首先，它是表格数据，并没有反对使用好的“<table>”。

如果您不能这样做，可以使用this article中讨论的display: inline-block。最终结果将与您目前的结果相同，但如果某些内容不匹配，它将是稳定的，即看起来不像这样：

第三，如果你不能使用一张桌子并且需要相同的高度，请按照这样的方式遍历每一行：

var lis = $('.b-products__list').find('li'),// all list elements
    lis_length = lis.length,
    row_width = 3, // the number of columns
    i, tmp_h3s, tmp_height;

// loop through all lis, but with row_width instead of `1`
for (i = 0; i < lis_length; i += row_width) {
  tmp_height = 0;

  // fetch all relevant headings in this group
  tmp_h3s = lis.slice(i, i+row_width).find('h3');
  tmp_h3s.each(function() {
    var h = $(this).height();
    if (tmp_height < h) {
      tmp_height = h;
    }
  });
  tmp_h3s.height(tmp_height);
}

（诀窍是使用splice方法）。

Answer 2

最简单的方法是将所有行组合到容器中并更改此容器中每个<li>的高度，如果不可能或者您不知道有多少项可以包含您的行，则可以区分每个行row by offset（）。top here是一个与页面一起使用的示例。它可以被重构，但主要的想法是明确的

function getHeight(offset){
var max = 0;
var curr = 0;
$('.b-product__title').each(function(){
    curr = $(this).height();
    if($(this).offset().top == offset && curr > max){
        max = curr
    }
});
return max;
}

$('.b-product__title').each(function(){
    var offset = $(this).offset().top;
    var height = getHeight(offset);
    $(this).height(height);
});

希望有所帮助