計算換行次數的函數在$（window）.on（'resize'）和$（document）.ready上的作用不同

Question

我有一個函數，它根據窗口的寬度計算div中的換行次數。 雖然將函數放置在$(window).on('resize')函數中可以正常工作，但是當放置在$(document).ready()函數中時則無法正常工作。 我希望它可以在頁面加載時正常工作，並且還可以調整窗口大小，我如何同時支持兩者？

JSFiddle

Javascript / jQuery：

// functions called in both document.ready() and window.resize

$(document).ready(function(){
  var lineCount = getLineCount();
  postItems(lineCount);
  $('.answer').text("Ready");
});

$(window).on('resize', function(){
    var lineCount = getLineCount();
    postItems(lineCount);
    $('.answer').text("Number of lines: " + lineCount);

});


// calculates the amount of lines required to hold the items
function getLineCount() {
  var lineWidth = $('.line').width();
  var itemWidthSum = 0;
  var lineCount=1;

  $('.item').each(function(index, element) {
      if((lineWidth - itemWidthSum) > ($(element).outerWidth())) {
        itemWidthSum = itemWidthSum + $(element).outerWidth();
      } else {
        lineCount++;
        itemWidthSum = $(element).outerWidth();
      }
  });
  return lineCount;
}


// overlays rows for the amount of linebreaks
function postItems(lineCount){
  var container = $('<div />');;
  for(var i = 1; i <= lineCount; i++) {
    container.append('<div class="line">' + i + '</div>');
  }
  $('.line-wrap').html(container);
}

您會在頁面的開頭看到，它錯誤地顯示了17行，而一旦您調整大小，它將顯示正確的數量。

Answer 1

問題出在getLineCount()的第一行。 本來你有

var lineWidth = $('.line').width();

但您的頁面上尚不存在“ line”類的元素（因為它們已添加到postItems()方法中。我將其更改為

var lineWidth = $(".container").width();

相反，現在您的代碼應該可以正常工作了。 摘錄如下：

 $(document).ready(function(){ var lineCount = getLineCount(); postItems(lineCount); $('.answer').text("Ready"); }); $(window).on('resize', function(){ var lineCount = getLineCount(); postItems(lineCount); $('.answer').text("Number of lines: " + lineCount); }); // calculates the amount of lines required to hold the items function getLineCount() { var lineWidth = $('.container').width(); var itemWidthSum = 0; var lineCount=1; $('.item').each(function(index, element) { if((lineWidth - itemWidthSum) > ($(element).outerWidth())) { itemWidthSum = itemWidthSum + $(element).outerWidth(); } else { lineCount++; itemWidthSum = $(element).outerWidth(); } }); return lineCount; } // overlays rows for the amount of linebreaks function postItems(lineCount){ var container = $('<div />');; for(var i = 1; i <= lineCount; i++) { container.append('<div class="line">' + i + '</div>'); } $('.line-wrap').html(container); } 

 body { text-align:center; } .answer { position: fixed; left: 0; bottom: 0; } .container { position: relative; width: 50%; margin: 0 auto; border: 1px solid #e8e8e8; display: inline-block; } .item { height: 50px; padding:0 10px; background-color: #aef2bd; float: left; opacity:0.2; white-space: nowrap; } .line-wrap { position: absolute; border: 1px solid red; width: 100%; height: 100%; top:0; left: 0; } .line { height: 50px; width: 100%; background-color: blue; opacity:0.5; color: white; transition: all 0.5s ease; } .line:hover { background-color: yellow; color: #000; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="item-wrap"> <div class="item">Computer Science</div> <div class="item">Language</div> <div class="item">Marketing</div> <div class="item">Biology</div> <div class="item">Computer Science</div> <div class="item">Language</div> <div class="item">Marketing</div> <div class="item">Biology</div> <div class="item">Computer Science</div> <div class="item">Language</div> <div class="item">Marketing</div> <div class="item">Biology</div> <div class="item">Computer Science</div> <div class="item">Language</div> <div class="item">Marketing</div> <div class="item">Biology</div> </div> <div class="line-wrap"> </div> </div> <h1 class="answer"></h1>