$（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 = $(".container").width(); 

にそれを変更し、そして今、あなたの彼らはあなたのpostItems()方法で追加されますので、。（自分のページにまだ存在し

var lineWidth = $('.line').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>