Question

我有一个输入，当用户点击回车键时，会创建一个新的列表项元素，其中包含输入字段中的文本。

我的问题是，过滤所有列表项元素的最有效方法是什么，以确保用户点击回车键时没有双打，如果这甚至是值得的。

HTML 只是一个输入和一个空的无序列表

<input type="text">

<ul></ul>

的Javascript on keyup，检查输入键，如果输入命中，获取值，创建新li，并将值附加到新li元素

$( 'input[type=text]' ).keyup(function(e) {

    switch( e.keyCode ){

        case 13:

              var t = $( 'input[type=text]' ).val();
              var c = $( 'ul li' ).length;


          $( 'ul' ).append( '<li></li>' );

              $( "ul li:nth-child( " + c + " ) ").append( document.createTextNode( t ) );

           break;

            }           

});

在将新的li元素附加到列表之前，我需要检查ul中已存在的所有li元素，以确保具有该值的li尚不存在。

Answer 1

编辑以上js小提琴（由milind）

DEMO

使用.each循环并检查

需要再添一个案例。如果值为空，则不应添加。 This case added

Answer 2

使用:last选择器将文本节点附加到新添加的li元素。

 $( "ul li:last").append(document.createTextNode(t));

<强> Working Demo

检查Keypress中多个元素内文本的最有效方法

2 个答案: