0

truncateMe id を使用して div の複数のブロックを作成する次のものがあり、この div 内のコンテンツを切り捨てたいと考えています。

<ul class="usernews">
    @foreach(var news in Model.News){
        <li>
                <div class="usernews_img">image</div>
                <div class="usernews_info">
                    <div class="truncateMe">@Html.Raw(@news.News.NewsContent)</div>
                </div>

        </li>
    }
</ul>

 <script type="text/javascript">

     var len = 100;
     var p = document.getElementById('truncateMe1');
     if (p) {

         var trunc = p.innerHTML;
         if (trunc.length > len) {

             /* Truncate the content of the P, then go back to the end of the
             previous word to ensure that we don't truncate in the middle of
             a word */
             trunc = trunc.substring(0, len);
             trunc = trunc.replace(/\w+$/, '');

             /* Add an ellipses to the end and make it a link that expands
             the paragraph back to its original size */
             trunc += '<a href="#" ' +
      'onclick="this.parentNode.innerHTML=' +
      'unescape(\'' + escape(p.innerHTML) + '\');return false;">' +
      '...<\/a>';
             p.innerHTML = trunc;
         }
     }

</script>

次に、truncateMe id を持つ単一の div に対して機能するこの Java スクリプトがあります。truncateMe id を持つすべての div に同じものを適用するにはどうすればよいですか?

4

1 に答える 1

1

jQueryの使用が許可されている場合、これは非常に簡単です。

$.fn.truncate = function(options) {
   options = $.extend({maxLength:100}, options);

   this.each(function() {
     var $this = $(this);

     var html = $this.html();

     if (html.length <= options.maxLength) return;

     html = html.substring(0, options.maxLength);
     html = html.replace(/\w+$/, '');

     html += '<a href="#" ' +
      'onclick="this.parentNode.innerHTML=' +
      'unescape(\'' + escape($this.html()) + '\');return false;">' +
      '...<\/a>';

     $this.html(html);
   });
}

それを使用するには：

$('.truncate-me').truncate(); // use a CSS class instead of IDs
于 2012-05-18T04:41:21.023 に答える