0

私はこのようなマークアップを持っています。このリンクではli、 内に 3 つの sがあるulことがわかります。そのマークアップでは、liクラス名が最初にあり、最後にlast. li クラス名 last は、行の最後の li 要素です。今、私の要件に従って、3つのliを連続して取得し、次の3つのliを別の行に取得しました。マークアップはこのように約100あります。

そのマークアップでは、h3 タグ内でタイトルの長さが異なり、コンテンツの高さが乱れていることがわかります。タイトルの長さは各アイテムで非常に大きくなるため、コンテナに一定の高さを割り当てることはできません。誰かがjQueryで、すべての行の他のすべてのコンテナの高さを同じにする方法を教えてもらえますか?

ロジックは、行の内側に見えるようなものになり、行内の 3 つの Li を意味し、高さが他の 2 つよりも大きい場合、その 1 つを最高の高さとして宣言し、他の 2 つの Li をその高さにします。このようにして、すべてのコンテンツを高さごとに揃えることができます。ヘルプや提案は非常に高く評価されます。

ノート

マークアップを変更できません。そのままとなります。

4

1 に答える 1

1

このコードは、あなたが求めていたものを解決しますが、別の問題である LI の内側にあるボタンを並べません。おそらく、CSS の相対/絶対配置を使用して LI の下部にボタンを配置して、それらを並べることができます。

http://jsfiddle.net/NWC2Q/10/

$(function() {
  var items = $("ul.products li");
  var rows = items.length / 3;
  if (rows <= 0)
    rows = 1;

  for(var r=0;r<rows;r++)
  {
    normalizeRowHeight(r, items);
  }    
});

function normalizeRowHeight(row, itemSet)
{
  var maxRowHeight = 0; 
  var startIndex = (row == 0 ? 1 : (row + 1) * 3) - 1;
  var endIndex = (startIndex + 2) > itemSet.length ? itemSet.length - 1: (startIndex + 2);

  rowItems = itemSet.slice(startIndex, endIndex);

  var maxRowHeight = Math.max.apply(null, rowItems.map(function(i,e) {
    return $(e).height();
  }).get());

  rowItems.each(function(i) {
    $(this).css('height', maxRowHeight + "px");
  });  
}
于 2012-12-10T07:11:27.357 に答える