javascript - 文字数が設定された制限を超えた場合にのみdivを追加する

Question

タブに 540 を超える文字が含まれている場合、pdpTab5 に div を追加しようとしています。モーダルを介して「続きを読む...」のような状況を作成する場所。

これを使用してテキストを切り捨てています。しかし、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>