jQuery /删除<p>而不丢失超链接或读取更多内容

Question

有什么想法让‘阅读更多’旁边的文本，并删除'p‘从var内容= $(".myClass p").html()；而不失去超链接？非常感谢..。

​

      var show_char = 280;
      var ellipses = "... ";
      var content = $(".myClass").html();
      if (content.length > show_char) {
         var a = content.substr(0, show_char);
         var b = content.substr(show_char - content.length);

         var html = a + "<span class=\'abc\'>" + ellipses + "</span><span class=\'abc\' style=\'display:none\'>" + b + "</span><a class=\'read-more\' href=\'#\'>Read more</a>";        
        $(".myClass").html(html);
      }
      $(".read-more").click(function(e) {
         e.preventDefault();
         $(".read-more").text() == "Read more" ? $(".read-more").text(" Read less") : $(".read-more").text("Read more");     
         $(".myClass .abc").toggle();
      });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="myClass">
  <p><a href="https://stackoverflow.com/">stackoverflow</a> is a question and answer site for professional and enthusiast programmers. It features questions and answers on a wide range of topics in computer programming. It was created to be a more open alternative to earlier question and answer sites such as Experts-Exchange.</p>
</div>

​

Answer 1

只要做一件小事就行了。您可以包含子组合器(>)，以在p中捕获.myClass标记，同时省略在第三行(即var content = $(".myClass").html(); )中写入标记

我希望这能帮到你!如果通过单击答案左边的✓来帮助解决问题，请随意标记为已接受的答案。

​

var show_char = 280;
      var ellipses = "... ";
      var content = $(".myClass >*").html(); 
      
      if (content.length > show_char) {
        var a = content.substr(0, show_char);
        var b = content.substr(show_char - content.length);
        var html = a + "<span class=\'abc\'>" + ellipses + "</span><span class=\'abc\' style=\'display:none\'>" + b + "</span><a class=\'read-more\' href=\'#\'>Read more</a>";
        $(".myClass").html(html);
      }
      $(".read-more").click(function(e) {
         e.preventDefault();
         $(".read-more").text() == "Read more" ? $(".read-more").text(" Read less") : $(".read-more").text("Read more");     
         $(".myClass .abc").toggle();
      });

html {
  font-size: 18px;
  font-family: sans-serif
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="myClass">
  <p><a href="https://stackoverflow.com/">stackoverflow</a> is a question and answer site for professional and enthusiast programmers. It features questions and answers on a wide range of topics in computer programming. It was created to be a more open alternative to earlier question and answer sites such as Experts-Exchange.</p>
</div>

​