用于多个div中文本截断的单个脚本

Question

这是我的前一个问题的延续。

Joffrey给出的答案很好，但问题是，它在所有具有相同类名的div中加载相同的内容。

对于每个div来说，这应该是独立的。如果您检查附带的演示，您可以看到所有div都显示了与第一个div相同的内容，尽管每个div有不同的内容。

下面是使用的代码

var text = $('.truncate, .truncate_another').text();
    var shortText = $.trim(text).substring(0, 50).split(" ").slice(0, -1).join(" ") + "...";
    $('.truncate, .truncate_another').text(shortText);

    $('.truncate, .truncate_another').hover(function(){
        $(this).text(text);
        $('.truncate, .truncate_another').css('z-index', '10');
        $(this).css('z-index', '100');
    }, function(){
        $(this).text(shortText);
    });

这里的演示

Answer 1

正如您已经注意到的，将属性设置为$('.truncate, .truncate_another')的结果将影响每个匹配项。循环遍历项目，以单独处理它们：

$('.truncate, .truncate_another').each(function() {
  var text = $(this).text();
  var shortText = $.trim(text).substring(0, 50).split(" ").slice(0, -1).join(" ") + "...";
  $(this).text(shortText);

  $(this).hover(function(){
    $(this).text(text);
    $('.truncate, .truncate_another').css('z-index', '10');
    $(this).css('z-index', '100');
  }, function(){
    $(this).text(shortText);
  });
});