將li附加到父ul

Question

我正在嘗試使用jquery從輸入中獲取文本以添加到父級中的現有ul，但是當我這樣做時：

$("input[type = 'text']").keypress(function(event){
    if(event.which === 13){
        //grabbing new todo from input
        var todoText = $(this).val();
        $(this).val("");
        //create a new li and add to ul
        $(this).parent().append("<li><span><i class='fa fa-trash'></i></span> " + todoText + "</li>");
    }
});

它直接向父級添加了一個新li。 我意識到我忘了提到我希望將其添加到現有的ul中，因此我嘗試更改此設置：

//create a new li and add to ul
$(this).parent("ul").append("<li><span><i class='fa fa-trash'></i></span> " + todoText + "</li>");

但它仍然無法正常工作，現在甚至都沒有在任何地方添加任何內容。 也許是因為我語法錯誤或其他原因？

這是我的玉的結構示例：

.frame
    .bit-2
      h1
        | text 
        i.fa.fa-plus             
      input(type='text', placeholder='text')           
      ul
        li
          span
            i.fa.fa-trash
          |  text              
        li
          span
            i.fa.fa-trash
          |  text             

有什么想法嗎？

Answer 1

首先，如果你不想直接父母，但父母 ，你應該用最接近的 ，而不是父母

$(this).closest('ul')

其次，在您發布的結構中，UL似乎不是輸入的父項，而是同級項，這意味着您可以在下一步中選擇它。

$(this).next('ul')

但是，這非常具體，這意味着輸入將始終必須緊鄰ul。
如果您知道它總是在框架的上下文中，那么我可能會采用類似的方法：

$(this).closest('.frame').find('ul')

Answer 2

請使用.next（）函數，如下所示。

$(document).ready(function(){
  $("input[type = 'text']").keypress(function(event){

    if(event.which === 13){
      //grabbing new todo from input
      var todoText = $(this).val();
      $(this).val("");
      //create a new li and add to ul
      $(this).next("ul").append("<li><span><i class='fa fa-trash'></i></span> " + todoText + "</li>");
    }
  });
});

對於演示，請檢查以下片段。

 $(document).ready(function(){ $("input[type = 'text']").keypress(function(event){ if(event.which === 13){ //grabbing new todo from input var todoText = $(this).val(); $(this).val(""); //create a new li and add to ul $(this).next("ul").append("<li><span><i class='fa fa-trash'></i></span> " + todoText + "</li>"); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text"/> <ul><li>First</li></ul> 

Answer 3

也許這會工作

$(this).closest("ul").append("<li><span><i class='fa fa-trash'></i></span> " + todoText + "</li>");