jQuery的添加儘可能多的跨度，因爲它需要填補一個div

Question

我有一個HTML DIV `

<div class="words_padding"> 

</div> 

即800像素和我有這個jQuery陣列

var words=["thing","my","low","life","that","repeat","his","meaning","if","she","he","never","tell","part","tubes","how","should","come","off","on","it","about","me","and","do","same","put","country","math","like"]; 

我要填寫與div相同的跨度可以在沒有越界的情況下進行。
我試圖用做它的這樣

for (var i = 0; i <= 8; i++) { 
     $('.words_padding').append("<span class=\"words_totp\">"+words[Math.floor((Math.random() * words.length))]+"</span>"); 
    } 

但使其熄滅邊界 的jsfiddle有些話是比其他時間要長：https://jsfiddle.net/2yxvg5ye/2/

Answer 1

我覺得這是很簡單的。該JS如下：

var words=["thing","my","low","life","that","repeat","his","meaning","if","she","he","never","tell","part","tubes","how","should","come","off","on","it","about","me","and","do","same","put","country","math","like"]; 
$('body').on('click', '.Start_tp', function(event) { 
    event.preventDefault(); 
    var $newWord, $wrapper = $('.words_padding'), canLoop = true, totalWidthsUsed = 0; 
    while (canLoop) { 
     $newWord = $("<span class=\"words_totp\">"+words[Math.floor((Math.random() * words.length))]+"</span>"); 
     $wrapper.append($newWord); 
     $newWord = $wrapper.find('.words_totp').last(); 
     totalWidthsUsed += $newWord.outerWidth(); 
     if(totalWidthsUsed > 800) { 
      $newWord.remove(); 
      canLoop = false; 
     } 
    } 
}); 

更新的jsfiddle：https://jsfiddle.net/2yxvg5ye/4/

Answer 2

這是我提議：

<div class="words_padding" style="width: 800px;"> 

</div> 

<div style="display: none;" id="hid"></div> 

div #hid是腳本來的工具，因此它的display: none;。

var words=["thing","my","low","life","that","repeat","his","meaning","if","she","he","never","tell","part","tubes","how","should","come","off","on","it","about","me","and","do","same","put","country","math","like"]; 


$(".words_padding").append("<span class=\"words_totp\">"+ w +"</span>"); 
var aux=1; 
while (aux==1){ 
    var w = words[Math.floor((Math.random() * words.length))]; 
    $("#hid").append("<span class=\"words_totp\">"+ w +"</span>");  if($(".words_totp").last().position().left+$(".words_totp").last().outerWidth()+$("#hid").find(">:first-child").outerWidth()<=800){ 
     $(".words_padding").append($("#hid")[0]); 
     $("hid").empty(); 
    }else{ 
     aux=0; 
    } 
} 

適合我！不是最乾淨的方式，但似乎能完成這項工作。讓我知道如果你有問題:)

Answer 3

我走近了，但對我的生活無法弄清楚爲什麼這需要點擊兩次按鈕的工作。這就是說，如果你能解決這個問題，那麼你應該很好去。

這所做的是調用一個函數來隨機單詞的列表，然後追加所有的人都到div，但他們默認爲display:none;

然後通過添加所有span元素去和做數學到看看寬度是否小於容器。如果是，那麼它將會是一個跨度元素，直到達到最大寬度。

\t var words = ["thing", "my", "low", "life", "that", "repeat", "his", "meaning", "if", "she", "he", "never", "tell", "part", "tubes", "how", "should", "come", "off", "on", "it", "about", "me", "and", "do", "same", "put", "country", "math", "like"]; 
 

 
\t function shuffle(array) { 
 
\t var currentIndex = array.length, 
 
\t  temporaryValue, randomIndex; 
 

 
\t // While there remain elements to shuffle... 
 
\t while (0 !== currentIndex) { 
 

 
\t  // Pick a remaining element... 
 
\t  randomIndex = Math.floor(Math.random() * currentIndex); 
 
\t  currentIndex -= 1; 
 

 
\t  // And swap it with the current element. 
 
\t  temporaryValue = array[currentIndex]; 
 
\t  array[currentIndex] = array[randomIndex]; 
 
\t  array[randomIndex] = temporaryValue; 
 
\t } 
 

 
\t return array; 
 
\t } 
 
\t $('body').on('click', '.Start_tp', function(event) { 
 
\t event.preventDefault(); 
 
\t words = shuffle(words); 
 
\t var maxWidth = $('.words_padding').width(); 
 
\t var width = 0; 
 

 
\t $(words).each(function(i) { 
 
\t  $('.words_padding').append("<span class=\"words_totp\" style='display:none;'>" + words[i] + "</span>"); 
 
\t  $('.words_padding span').each(function() { 
 
\t  width = width + $(this).outerWidth(); 
 
\t  if (width < maxWidth) { 
 
\t   $(this).fadeIn(); 
 
\t  } 
 
\t  }); 
 

 
\t }); 
 
\t });

.words_totp { 
 
    font-size: 38px; 
 
    color: gray; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
    font-family: monospace; 
 
} 
 

 
.words_padding { 
 
    word-break: break-word; 
 
    margin-left: 12px; 
 
    margin-top: 10px; 
 
    background: white; 
 
    width: 800px; 
 
    position: relative; 
 
    left: 25px; 
 
    height: 70px; 
 
} 
 

 
.Start_tp { 
 
    font-size: 30px; 
 
    border: 0; 
 
    background: #03a9f4; 
 
    padding: 5px; 
 
    color: white; 
 
    position: relative; 
 
    top: 100px; 
 
    left: 100px; 
 
    width: 200px; 
 
    cursor: pointer; 
 
    outline: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="words_padding"></div> 
 
<input type="button" class="Start_tp" value="Start">

這裏是一個小提琴，以及：https://jsfiddle.net/8k44gvrm/1/