Question

我首先在网页上加载了12个<div>元素，并且在<span>内有一个描述。滚动页面时会加载其他<div>个元素。我使用了以下jQuery来限制div上的描述文本。

$(document).ready(function () {
        $("span.fine-print").html(function(index, currentHTML) {
            if (currentHTML.length > 200) {
                var str= currentHTML.substr(0, 200)+ '...<p style="color:blue;display:inline">Read more</p>';
                return str;

            }
        });
    });

此jQuery适用于前12个<div>元素，但它在12个元素之后无法正常工作。如何解决这个问题。有没有可能这样做？

Answer 1

检查一下：

Html

<div id="wrapper">
 <div>
   <span class="sp">hello hello hello hello hello hello hello hello hello</span>
 </div>
 <div>
  <span class="sp">hello hello hello hello hello hello hello hello hello</span>
 </div>
 <div>
  <span class="sp">hello hello hello hello hello hello hello hello hello</span>
 </div>
 <div>
  <span class="sp">hello hello hello hello hello hello hello hello hello</span>
 </div>
 <div>
  <span class="sp">hello hello hello hello hello hello hello hello hello</span>
 </div>
</div>

Jquery的

$(document).ready(function () {
      $(".sp").html(function(index, currentHTML) {
       return changeContent(currentHTML);
    });
});

$(document).scroll(function() {
  var htmlStrng = "<div><span class='sp'>hello hello hello hello hello hello hello hello hello</span></div>";
    var $contentStr = $(htmlStrng);
    var contentString = $contentStr.find('span').text();
    contentString = changeContent(contentString);
    $contentStr.find('span').html(contentString);
    $("#wrapper").append($contentStr);
    });

function changeContent(htmlStr){
    if (htmlStr.length > 20) {
            var str= htmlStr.substr(0, 20)+ '...<p style="color:blue;display:inline">Read more</p>';
            return str;
        }
}

演示链接

选中此项： - https://jsfiddle.net/o3ntvbex/3/

注意：仅用于演示目的。没有优化的代码。

Answer 2

刚刚创建了一个快速演示，演示了每次ajax调用返回时都需要执行此操作的事实。

function abridgeFinePrint(){
  $("span.fine-print").html(function(index, currentHTML) {
            if (currentHTML.length > 200) {
                var str= currentHTML.substr(0, 200)+ '...<p style="color:blue;display:inline">Read more</p>';
                return str;

            }
        });
}

$(document).ready(function () {
    abridgeFinePrint();
    $('button').on('click', function(){
      $('#loading-indicator').show();
      //simulate ajax latency
      setTimeout(function(){
        $('#loading-indicator').hide();
        $('#template').clone().css({display: "block"}).appendTo('section');
        $('section div:last span').addClass('fine-print');
        abridgeFinePrint()
        }, 800);
      });
});

div {
  border: 1px solid #555;
  border-radius: 5px;
  padding: 15px;
  margin: 3px;
}

div:hover {
  background: #ddd;
}

#template,
#loading-indicator {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div><span class="fine-print">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</span>
  </div>
</section>
<div id="loading-indicator">Loading...</div>

<button>Load more divs</button>

<div id="template"><span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</span>
  </div>

如何在动态加载的元素中使用jQuery？

2 个答案: