首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何使用jquery从文章中获取2 <p>标记

如何使用jquery从文章中获取2 <p>标记
EN

Stack Overflow用户
提问于 2019-12-16 11:17:57
回答 1查看 39关注 0票数 0

我有一个部门有一篇文章。在前两个<p>上,它都是HTML。

为此,我使用了以下代码。

代码语言:javascript
复制
$(document).ready(function(){
    $(".button").click(function(){
    var count = 2;
    var selected = $(this).attr("data-value");   
    if (count.length === 0) 
    {   
        $("span").css({ "display": "block"});
    }else{
        $('.button').removeClass("active");
        if (selected == 'paragraphs') 
        {
            $(this).addClass("active");
            var text = "";
            $( "p" ).each(function( index ) {
                if (index < count) 
                {
                    text += '<p>'+($( this ).text()).trim() + "</p><br>";
                }              
            });
            $( "#demo" ).empty();
            document.getElementById("demo").innerHTML = text;
        }
    }
    });
});
代码语言:javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>
            <span data-value="paragraphs" class="button" style="cursor: pointer;">Paragraphs</span>
            </button>
<div class="col-xs-12" id="ltr" style="max-height: none; display: none;">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    </p>
    <p>
        Senectus et netus et malesuada. Nunc pulvinar sapien et ligula ullamcorper malesuada proin.  
    </p>
    <p>
        Sit amet nulla facilisi morbi tempus. 
    </p>
</div>
<p id="demo"></p>

这样,我只得到了<p>文本的结果,但我希望得到类似的结果。

代码语言:javascript
复制
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>


<p>Senectus et netus et malesuada. Nunc pulvinar sapien et ligula ullamcorper malesuada proin.</p>

都是html标签。

有人能帮我吗。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-12-16 11:31:26

如果您想呈现一个<字符,那么将&lt;放在HTML中。

代码语言:javascript
复制
$(document).ready(function(){
    $(".button").click(function(){
    var count = 2;
    var selected = $(this).attr("data-value");   
    if (count.length === 0) 
    {   
        $("span").css({ "display": "block"});
    }else{
        $('.button').removeClass("active");
        if (selected == 'paragraphs') 
        {
            $(this).addClass("active");
            var text = "";
            $( "p" ).each(function( index ) {
                if (index < count) 
                {
                    text += '<p>'+($( this ).text()).trim() + "</p><br>";
                }              
            });
            $( "#demo" ).empty();
            document.getElementById("demo").innerHTML = text.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
        }
    }
    });
});
代码语言:javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>
            <span data-value="paragraphs" class="button" style="cursor: pointer;">Paragraphs</span>
            </button>
<div class="col-xs-12" id="ltr" style="max-height: none; display: none;">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    </p>
    <p>
        Senectus et netus et malesuada. Nunc pulvinar sapien et ligula ullamcorper malesuada proin.  
    </p>
    <p>
        Sit amet nulla facilisi morbi tempus. 
    </p>
</div>
<p id="demo"></p>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/59355569

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档