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

时间:2017-09-18 15:07:29

标签: javascript jquery

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

6 个答案:

答案 0 :(得分:3)

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

&#13;
&#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;
&#13;
&#13;

答案 1 :(得分:0)

您的功能问题是它总是附加到所有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>

答案 2 :(得分:0)

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

答案 3 :(得分:0)

您必须使用split方法。

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

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

&#13;
&#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;
&#13;
&#13;

答案 4 :(得分:0)

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

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

答案 5 :(得分:0)

$('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;
&#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;
&#13;
&#13;