jquery - Jquery - 换行后添加项目符号
问题描述
我有一个文本区域,当您添加内容时,它会自动添加项目符号点,问题是添加新行时它应该添加单独的 ullet 点。问题是它完全附加了内容
这是我如何添加内容
它应该看起来像这样
这是片段
$(function(){
$('#getvalue').click(function(){
// Get the text area value
var textarea_value = $('#textarea').val();
// Get a jQuery object of the template html
var templateHolder = $($('#template3').html());
// Put the text area text inside of the template's <p> tag
// Use .html() to overwrite the old content with the new
// content every time
templateHolder.find('p').html(textarea_value);
// Get a reference to the <ul> element
var $btext = $('.popupbtext');
// Add the template (with text area text) to the <ul> element
$btext.append(templateHolder);
// Commented out because it was throwing errors.
// Left in because it was part of original fiddle
//$('.jcarouselbtext').jcarousel('reload', {
// animation: 'slow'
//});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<textarea id="textarea"></textarea>
<br/>
<input type="button" id="getvalue" value="Send text" class="demobutton">
<div class="jcarouselbtext" data-jcarousel="true">
<ul class="popupbtext">
<li>
<p class="info1">First bullet point</p>
</li>
</ul>
</div>
<script id="template3" type="text/template">
<li>
<p class="info1 show-textarea-value"></p>
</li>
</script>
解决方案
尝试根据新行拆分文本并将它们作为新列表项添加到您的 popupbtext 元素
$(function(){
$('#getvalue').click(function(){
// Get the text area value
var textarea_value = $('#textarea').val();
var lines = textarea_value.split('\n'); //Split the text content based on new line and iterate through each line then add them as seperate list item
lines.forEach(function(line){
// Get a jQuery object of the template html
var templateHolder = $($('#template3').html());
// Put the text area text inside of the template's <p> tag
// Use .html() to overwrite the old content with the new
// content every time
templateHolder.find('p').html(line);
// Get a reference to the <ul> element
var $btext = $('.popupbtext');
// Add the template (with text area text) to the <ul> element
$btext.append(templateHolder);
});
// Commented out because it was throwing errors.
// Left in because it was part of original fiddle
//$('.jcarouselbtext').jcarousel('reload', {
// animation: 'slow'
//});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<textarea id="textarea"></textarea>
<br/>
<input type="button" id="getvalue" value="Send text" class="demobutton">
<div class="jcarouselbtext" data-jcarousel="true">
<ul class="popupbtext">
<li>
<p class="info1">First bullet point</p>
</li>
</ul>
</div>
<script id="template3" type="text/template">
<li>
<p class="info1 show-textarea-value"></p>
</li>
</script>
推荐阅读
- ef-code-first - 更新相关实体 ASP.NET 样板
- google-apps-script - 具有相同设置的两个 Apps 脚本项目具有不同的语言环境
- html - 将 HTML 解析为干净的 XML
- python - 使用 ctypes 将字节 numpy 数组传递给 C 函数
- pandas - 获取 pandas 数据框组满足条件
- ruby-on-rails - 如何按顺序运行表达式或函数
- python - Tensoflow seq2seq 解码器不起作用
- jquery - 在 jQuery 中创建一个键数组
- facebook - Facebook 应用页面 api 重新提交
- asp.net - 如何发送和接收 Json?