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

它直接给父母增加了一个新的李。我意识到我忘记提到我希望将它添加到现有的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

请像下面这样使用.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 2

首先，如果您不想要直接父(而不是父)，则应该使用最近的而不是父级。

$(this).closest('ul')

其次，在结构中，您已经发布了UL，它似乎不是输入的父级，而是同级的，这意味着您可以使用下一首选择它

$(this).next('ul')

但是，这是非常具体的，这意味着输入必须始终紧挨着ul。

如果你知道它总是在框架的上下文中，我可能会说：

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

Answer 3

也许这份遗嘱行得通

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