Question

我有一个div，其中有一篇文章。并在前2个<p>中加上所有HTML标记。

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

$(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;
        }
    }
    });
});

<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>的文本，但是我想要类似的结果。

<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标记。

有人可以帮我吗？

Answer 1

如果要呈现<字符，则将<放入HTML。

$(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;');
        }
    }
    });
});

<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>

如何从带有jquery的HTML标签的文章中获取2个<p>

1 个答案: