Question

我正在练习模仿一个bash控制台，我实际上已经到了最后，尽管存在问题。如果元素总数超过给定值，我需要始终删除.bash-line类的第一个元素。

我为此创建了一个函数，不幸的是 - 它删除了第一个元素，但没有添加下一个元素。我该怎么做才能改变它？

＆＃13;

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").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);

});

＆＃13;

<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>

＆＃13;

Answer 1

问题是因为您循环遍历.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,
  });
}

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>

Answer 2

您不需要对每个找到的元素进行操作来删除一组jQuery元素的第一个元素，只需这样做：

$（“＃console-content p.bash-line”）。first（）。remove（）;

您还可以查看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>

删除第一个列表项（如果它包含指定数量的项目

2 个答案: