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

首先，如果您不想要直接父母，但父母，则应使用closest代替parent

$(this).closest('ul')

其次，在结构中，您已发布，UL似乎不是输入的父级，而是兄弟，这意味着您可以使用next选择它

$(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>");

将li附加到父级ul

3 个答案: