javascript - 仅当字符数超过设置限制时才添加 div

Question

如果选项卡包含超过 540 个字符，我正在尝试将 div 附加到 pdpTab5 。我将通过模态创建一种“阅读更多......”的情况。

我正在使用它来截断文本。但是添加 div 的部分让我感到困惑。如果选项卡包含少于 540 个字符，我不想显示 div。

<script>
    $(function(){
        var myDiv = $('#pdpTab5');
        myDiv.html(myDiv.html().substring(0,540));
    });
</script>

Answer 1

$(function() {
      var myDiv = $('#pdpTab5'),
          divChars = myDiv.text(),
          shortened = divChars.substring(0, 540) + "... <a href='#' class='readMore'>Read more</a>",
          $new =$(myDiv.clone().html(shortened));


      if (divChars.length > 540) {
          // Perform some action here, not quite sure what you wanted to do 
          myDiv.empty().append($new).find(".readMore").on("click", function() {

              $(this).parent().empty().text(divChars);
          });


      }
 });

这是小提琴。

Answer 2

试试这个...

<script>
    $(function(){
        var myDiv = $('#pdpTab5');


        if(myDiv.html().length > 540){
            // create new div
            myDiv.parent().append("<div>" + myDiv.html().substring(540) + "</div>");
        }
        myDiv.html(myDiv.html().substring(0,540));
    });
</script>