指定された数の項目が含まれている場合、最初のリスト項目を削除する

Question

私はbashコンソールの模倣を練習していますが、問題はありますが実際は最後です。要素の総数が指定された値を超えた場合、.bash-lineクラスの最初の要素を常に削除する必要があります。

残念ながら、私はこのために関数を作成しました。最初の要素を削除しますが、次の要素は追加しません。それを変えるには何ができますか？

function animateConsole(string) { 
 

 
    var bash = $('<p class="bash-line"></p>'); 
 
    
 
    $("#console-content").append(bash); 
 
    var typed = new Typed(bash.get(0), { 
 
     strings: [string], 
 
     typeSpeed: 10, 
 
     showCursor: false, 
 
    }); \t 
 
    
 
} 
 

 
function deleteFirst() { 
 
    
 
    if($('.bash-line').length == 2) { 
 
    
 
    $(".bash-line").each(function() { 
 
     $(this).first().remove(); 
 
    }); 
 
    
 
    } 
 
    
 
} 
 

 
$(document).ready(function() { 
 

 
    setTimeout(function() {animateConsole('<span>//</span>GET CONNECTION SECRET');}, 1000); 
 
    setTimeout(function() {animateConsole('<span>//</span>SENDING REQUEST'); deleteFirst();}, 2000); 
 
    setTimeout(function() {animateConsole('<span>//</span>WAITING FOR RESPONSE');}, 3000); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.6/lib/typed.min.js"></script> 
 

 
<div id="console-content"> 
 
</div>

Answer 1

をあなただけの、jQueryの要素のセットの最初の要素を削除するには、すべての見つかった要素にforeachの必要はありません（ "＃console-content p.bash-line"）。first（）。remove（）; do：

あなたはまた、jqueryの最初方法のマニュアルを確認することができます

：ここhttps://api.jquery.com/first/

は完全な作業例です：

function animateConsole(string) { 
 
    var bash = $('<p class="bash-line"></p>'); 
 

 
    $("#console-content").append(bash); 
 

 
    deleteFirst(); 
 
    var typed = new Typed(bash.get(0), { 
 
     strings: [string], 
 
     typeSpeed: 10, 
 
     showCursor: false, 
 
    }); 
 
} 
 

 
function deleteFirst() { 
 
    if($('.bash-line').length > 2) { 
 
     $("#console-content p.bash-line").first().remove(); 
 
    } 
 
} 
 

 
$(document).ready(function() { 
 
    setTimeout(function() {animateConsole('<span>//</span>GET CONNECTION SECRET');}, 1000); 
 
    setTimeout(function() {animateConsole('<span>//</span>SENDING REQUEST');}, 2000); 
 
    setTimeout(function() {animateConsole('<span>//</span>WAITING FOR RESPONSE');}, 3000); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.6/lib/typed.min.js"></script> 
 

 
<div id="console-content"> 
 
</div>

Answer 2

あなたは.bash-line要素をループし、各反復の最初の1つを取り外しているので問題があります。この結果、すべてのアイテムが削除されます。この問題を解決するには

、ないループを実行します。

function animateConsole(string) { 
 
    var bash = $('<p class="bash-line"></p>'); 
 
    $("#console-content").append(bash); 
 
    var typed = new Typed(bash.get(0), { 
 
    strings: [string], 
 
    typeSpeed: 10, 
 
    showCursor: false, 
 
    }); 
 
} 
 

 
function deleteFirst() { 
 
    if ($('.bash-line').length == 2) { 
 
    $(".bash-line:first").remove(); 
 
    } 
 
} 
 

 
$(document).ready(function() { 
 
    setTimeout(function() { 
 
    animateConsole('<span>//</span>GET CONNECTION SECRET'); 
 
    }, 1000); 
 
    setTimeout(function() { 
 
    animateConsole('<span>//</span>SENDING REQUEST'); 
 
    deleteFirst(); 
 
    }, 2000); 
 
    setTimeout(function() { 
 
    animateConsole('<span>//</span>WAITING FOR RESPONSE'); 
 
    }, 3000); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.6/lib/typed.min.js"></script> 
 

 
<div id="console-content"></div>