2つのjQuery関数が連携していませんか？

Question

私は...関係なく、その長さのdivにテキストをフィットしない機能を持っている

function fitin() { 
$('#fitin div').css('font-size', '1em'); 

while ($('#fitin div').height() > $('#fitin').height()) { 
    $('#fitin div').css('font-size', (parseInt($('#fitin div').css('font-size')) - 1) + "px"); 
} 

} 

そして、それは元々、HTMLで書かれているもののために動作しますが、私はテキスト

を交換する機能を使用する場合

function getVerse() { 

var verses = ["this is one", "this is two"]; 
var index = 0; 
var verse = ""; 
$("#button2").click(function() { 

    $.getJSON("http://labs.bible.org/api/?passage=random&formatting=plain&type=json&callback=?", function(data) { 
    verse = JSON.stringify(data[0].text); 
     //alert(verse); 
    }); 
    if (index >= verses.length) { 
    index = 0; 
    } 
    $("#fitin").fadeOut(500, function() { 
    $(this).html("<b>" + verse + "test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test" + "</b>").fadeIn(500); 
    fitin(); 
    index++; 
    }); 
}); 

} 

fitin（）は機能しません。ここにはcodepen hereへのリンクがあります。

Answer 1

あなたの問題はここにある：

(parseInt($('#fitin div').css('font-size')) 

$('#fitin div').css('font-size'))の結果は50pxのような文字列であり、それはintに解析することはできません。文字列がreplace("em", "")

Answer 2

Here is a working penに '日'（2EM）の変化と数であれば

$('#fitin div').css('font-size', (parseInt($('#fitin div').css('font-size').replace("px", "")) - 1) + "px"); 

：問題を解決するためにこれを行います。あなたにはいくつかの問題がありました。

最初に、詩のテキストを更新したときに、<div>を置き換えなかったため、のセレクタ$('#fitin div')は何も選択されなくなりました。 .html()関数が同期であるが、ブラウザの再描画が発生する時間の非ゼロ量を取り、第二

$(this).html("<div><b>" + verse + "test ..." + "</b></div>").fadeIn(500); 

：に

$(this).html("<b>" + verse + "test ..." + "</b>").fadeIn(500); 

変更。再描画が行われるまで、fitin()関数は機能しません。ちょっとハッキリですが、これは変更することで解決します。

fitin(); 

：

setTimeout(fitin, 0); 

それは数字以外の文字を含む文字列のうち、整数を解析に頼っていたので、私がいることを修正するので第三に、あなたのフォントサイズの変更コードが適切に動作するつもりではなかったです

function fitin() { 
    var initialSize = 16; 
    do { 
     $('#fitin div').css('font-size', initialSize + "px"); 
    } while (($('#fitin div').height() > $('#fitin').height()) && --initialSize) 
}