Question

$('input').keyup(function(){
    var value = $(this).val();
    $('#values').html('<div>'+value+'</div>');
})

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

在此代码中，我试图让用户在Hello World, This Is My Home内输入一些像 input 这样的字词，现在我想要发生的事情是每个字，它将在父空div内为其div，所以对于我的例子，我想要的结果是

$('input').keyup(function(){
    var value = $(this).val();
    $('#values').html('<div>'+value+'</div>');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' value='Hello World, This Is My Home'>
    <div id='values'>
        <div>Hello</div>
        <div>World</div>
        <div>This</div>
        <div>Is</div>
        <div>My</div>
        <div>Home</div>
    </div>

Answer 1

你需要在输入值字符串中拆分单词，然后分别为每个单词添加div。此外，每次添加单词时，您都可以先清空div。 split(/[\s,]+/)将分隔字符串用于分隔符空格和逗号。你可以使用id作为主容器。 forEach中回调函数的第二个参数是index，因此如果需要，可以使用它来附加索引。

＆＃13;

$('input').keyup(function(){
    var value = $(this).val();
    var words = value.split(/[\s,]+/);
    $('#maindiv').html("");
    words.forEach((x, index) => $('#maindiv').append('<div>'+x + '-' + (index+1) +'</div>'));
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' value='Hello World, This Is My Home'>
    <div id="maindiv">
    </div>

＆＃13;

Answer 2

您的功能问题是它总是附加到所有div。所以我在一次潜水中添加了一个班级名称，所以每个单词都被添加到该Div。

每次用户按任意键时都会运行您的活动。所以我添加了if以允许用户点击回车键来运行功能

 $('input').keyup(function(e){

   // to check for enter keypress
   if(e.which==13){// 32 for space bar if you perfer
      var value = $(this).val();
      $('.Container').append('<div>'+value+'</div>');
   }
})


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text'>
<div class="Container">

</div>

Answer 3

$('input').keyup(function(){
    
    var wrap = $('div.hello');
    wrap.empty();
    
    var array = $(this).val().split(" ");
    array.forEach(function(element){
        wrap.append('<div>'+element.replace(',', '')+'</div>');
    });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' value='Hello World, This Is My Home'>

<div class="hello"></div>

Answer 4

您必须使用split方法。

此外，您必须为id div使用main属性，以避免duplicate div。

在这种情况下，您会看到呈现2^n个字词。

＆＃13;

$('input').keyup(function(){
    var values = $(this).val().split(' ');
    $('#main').empty();
    values.forEach(function(word){
       $('#main').append('<div>'+word+'</div>');
    });
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text'>
<div id="main">

</div>

＆＃13;

Answer 5

在添加新元素之前，您需要清除父div;非常谨慎使用.html()来避免脚本注入：

$('input').keyup(function(){
   var html = $(this).val().replace(/(\w+)/g, '<div>$1</div>')
   $('div').html('');
   $('#values').append(html);
});

Answer 6

$('div')表示select all the <div> in the page ...包括您使用上一次击键创建的内容。因此按键1创建一个div，按键2选择2个div并再创建2个，按键3选择8个div并再创建8个......这是危险的指数。给你的初始div一个ID，只选择这个。

优化：

缓存你的jQuery对象并重用它们，而不是在每次击键时寻找DOM并构建新的jQuery对象
e.target.value比获取$(this).val()

＆＃13;

const $container = $("#container")

$('input').keyup( e => {
    $container.empty()
    e.target.value.trim().split(" ").forEach( word => {
      $container.append(`<span class="word">${word} </span>`);
    })
})

＆＃13;

.word {
   border : blue solid 1px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' value=''>
<div id="container"></div>

＆＃13;

为value =“”中的每个单词创建<div>

6 个答案: