1

私はこのフィドルリンクを持っています。これで、私のマークアップが ul 内の li の束のようであることがわかります。これで、3 つの lis を 1 つの行として作成し、次の 3 つの lis を別の行として作成しました。ここで、jQuery を使用して、高さが他の 2 つの Li よりも大きい 1 つの Li の高さを取得し、2 つの Li を最も高い Li と同じ高さにしました。ここで、私の jQuery は最初の行では正常に機能していますが、他の行では機能していません。それで、誰かが同じ高さを他の行に対して実行する方法を教えてもらえますか? ヘルプや提案は非常に高く評価されます。私のjQueryコードはこのようなものです

<script type="text/javascript">
  jQuery(document).ready(function(){
    jQuery(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;
      itemSet.slice(0,3).each(function(i) {
        if ($(this).height() > maxRowHeight )
          maxRowHeight = $(this).height();
        });  
      itemSet.slice(0,3).each(function(i) {
        $(this).css('height', maxRowHeight + "px");
      });
    }
  });
</script>
4

3 に答える 3

2

.slice()各行の内の番号を更新する必要があるので、に.slice(0, 3)なり.slice(3, 6)、その後.slice(6, 9)などになります。次のようなものがトリックを行います：

(function($) {
  function normalizeHeight(items) {
    var maxHeight = 0, itemHeight;

    items.each(function() {
      itemHeight = $(this).height();
      if (itemHeight > maxHeight) {
        maxHeight = itemHeight;
      }
    }).height(maxHeight + 'px');
  }

  $(document).ready(function(){
    var itemsPerRow = 3,
        items = $('ul.products li'),
        rows = items.length / itemsPerRow, 
        r, min, max;

    if (rows < 1) rows = 1;

    for(r = 0; r < rows; r++) {
      min = itemsPerRow * r,
      max = min + itemsPerRow;
      normalizeHeight(items.slice(min, max));
    }
  });
}(jQuery));

jsbinにデモを載せました。

于 2012-12-10T12:09:02.237 に答える
0

あなたはこのようにすることができます

$(document).ready(function()
        {
            var i=0,j=0;
            $('li').each(function(){
                j=$(this).height();
                if (i<j)
                    i=j;
            });
            $('li').each(function(){
                $(this).height(i);//set Max height of li to other li
                alert($(this).height());
            });
        });

実際のデモを見る

于 2012-12-10T11:29:50.200 に答える
0

ロジックには、操作しているスライスを選択するための穴があります。常に最初の 3 つの項目に取り組みます。

これを試して：

function normalizeRowHeight(row, itemSet) {
  var maxRowHeight = 0;
  itemSet.slice(row * 3,(row + 1)*3).each(function(i) {
    if ($(this).height() > maxRowHeight )
      maxRowHeight = $(this).height();
    });  
  itemSet.slice(row * 3,(row + 1)*3).each(function(i) {
    $(this).css('height', maxRowHeight + "px");
  });
}
于 2012-12-10T11:16:39.250 に答える