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