追加李父UL

我试图从一个输入获得的文本使用jQuery添加到父现有的UL，但是当我这样做：追加李父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

发生了什么事的任何想法？

来源

2016-08-05 Shristi Sharma

有你看在你的浏览器的开发工具修改HTML？文本可能被添加，但不是您认为的地方。另外，如果您的Javascript中存在错误，则会通知您这个问题。 – Sablefoste

输入没有父母ul，使用兄弟姐妹... –

是的，我已经看了修改后的html。这就是我发现它没有加入到ul中的原因。我也没有得到任何错误。 –

请使用。接下来（）函数像下面。

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

来源

2016-08-05 16:41:52

非常感谢！ –

-1

可能这会工作

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

来源

2016-08-05 16:39:37 ubm

UI不是文本框的父级，所以这不会附加到UL。 –

对不起..我没有看到结构（粗心）@RahulPatel – ubm

它的好友。但结构已经在问题中了。 –

首先，如果你不想直接父，但一个父母，你应该使用closest代替parent

$(this).closest('ul')

其次，在你发布的结构中，UL看起来不是输入的父母，而是兄弟姐妹，这意味着你可以用next

$(this).next('ul')

但是，这是非常具体的，意味着输入将永远必须紧挨ul。
如果你知道它总是会在框架的背景下，我可能会喜欢的东西去：

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

来源

2016-08-05 16:40:51

回答

相关问题