想要文章的2段带有jQuery的html标签

时间:2019-12-13 07:21:35

标签: jquery html

我想要整篇文章的2个段落以及带有jquery的HTML标签。

为此,我尝试了以下代码。

$(document).ready(function(){
  $(".button").click(function(){
    var count = $('#count').val();
    var selected = $(this).attr("data-value");
    if (count.length === 0) 
    {   
        $("span").css({ "display": "block"});
    }else{
        if (selected == 'paragraphs') 
        {
            var text = "";
            $( "p" ).each(function( index ) {
                if (index < count) 
                {
                    text += '<p>'+($( this ).html()).trim() + "</p><br>";
                }
            });
            $( "#demo" ).empty();
            document.getElementById("demo").innerHTML = text;
        }
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="tool-lorem-types-row"> 
    <span style="color: red; display: none;">please enter valid input number</span>
    <input type="text" id="count" value="3" maxlength="3" autocomplete="off" required="required">
    <button>
        <span data-value="paragraphs" class="button" style="cursor: pointer;">Paragraphs</span>
    </button>
</div>

<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. Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa.
    </p>
    <p>
    Senectus et netus et malesuada. Nunc pulvinar sapien et ligula ullamcorper malesuada proin. Neque convallis a cras semper auctor. Libero id faucibus nisl tincidunt eget. Leo a diam sollicitudin tempor id. A lacus vestibulum sed arcu non odio euismod lacinia. In tellus integer feugiat scelerisque. Feugiat in fermentum posuere urna nec tincidunt praesent.
    </p>
    <p>
    Sit amet nulla facilisi morbi tempus. Nulla facilisi cras fermentum odio eu. Etiam erat velit scelerisque in dictum non consectetur a erat. Enim nulla aliquet porttitor lacus luctus accumsan tortor posuere. Ut sem nulla pharetra diam. Fames ac turpis egestas maecenas.
    </p>
</div>
<p id="demo"></p>

它工作正常,但是如果我输入2段,那么我想要类似的结果。

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa.</p>
<p>Senectus et netus et malesuada. Nunc pulvinar sapien et ligula ullamcorper malesuada proin. Neque convallis a cras semper auctor. Libero id faucibus nisl tincidunt eget. Leo a diam sollicitudin tempor id. A lacus vestibulum sed arcu non odio euismod lacinia. In tellus integer feugiat scelerisque. Feugiat in fermentum posuere urna nec tincidunt praesent.</p>

我想要带有所有HTML标记的结果。

但是我不知道该怎么办。

有人可以帮我吗?

0 个答案:

没有答案