用於多個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);
  });
});