首页 > 解决方案 > 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>

标签: jquery

解决方案


尝试根据新行拆分文本并将它们作为新列表项添加到您的 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>


推荐阅读