jQuery store .each() .text() 可以截断吗？

Question

我之前问过一个类似的问题，但没有提供足够的背景信息。结果，我收到了一个出色的、技术上正确的答案，但并没有解决我的问题。

我也在 Stack 上环顾四周，但对 jQuery 的了解还不够，无法找到我的答案。

我需要用 jQuery 截断多行文本。当浏览器窗口扩展和收缩时，代码也需要添加/删除文本。因此，根据我的最低理解，代码需要在截断之前存储文本，以便在浏览器窗口展开时可以添加文本。

最初这段代码解决了我的问题：

$(function () {
  var initial = $('.js-text').text();

  $('.js-text').text(initial);
  while($('.js-text').outerHeight() > $('.js-text-truncator').height()) {
    $('.js-text').text(function(index, text) {
      return text.replace(/\W*\s(\S)*$/, '...');
    });
  }

  $(window).resize(function() {
    $('.js-text').text(initial);
    while($('.js-text').outerHeight() > $('.js-text-truncator').height()) {
      $('.js-text').text(function(index, text) {
        return text.replace(/\W*\s(\S)*$/, '...');
      });
    }
  });
});

当我在一个页面上多次使用这些 .js 类时，此代码不再剪切它所有文本存储在一起，然后在使用这些类时吐出。 p>

这是该问题的 jsFiddle：

http://jsfiddle.net/1ddxtpke/

我需要单独存储每个 .js-text 文本，以便我可以在一个大型项目中使用这个 jQuery sn-p，并且如果用户要扩展他们的浏览器窗口大小，我可以将所有截断文本实例反馈到 DOM .

这可能吗？如果是这样，我该怎么做？

提前感谢您解决我的问题。我希望我在寻找的内容上已经足够具体了。

Answer 1

有几种方法可以做到这一点。您可以将其存储在数组中：

var initialValues = [];

// Save the initial data
$('.js-text').each(function () {
   initialValues.push($(this).text());
});

// On start
while($('.js-text').outerHeight() > $('.js-text-truncator').height()) {
    $('.js-text').text(function(index, text) {
      return text.replace(/\W*\s(\S)*$/, '...');
    });
}

// When the window gets resized
$(window).resize(function() {
    $('.js-text').text(function () { return initialValues[$('.js-text').index($(this))]; });
    while($('.js-text').outerHeight() > $('.js-text-truncator').height()) {
      $('.js-text').text(function(index, text) {
        return text.replace(/\W*\s(\S)*$/, '...');
      });
    }
});

但它有一个问题 - .js-text 元素不能被删除或移动，因为它会破坏排序。这需要另一个功能来重置订单，以防万一发生变化。

我没有测试过，但原则上它应该这样工作。

编辑：好的，我稍微修改了一下，结果如下：

var initialValues = [];

// Save the initial data
$('.js-text').each(function () {
   initialValues.push($(this).text());
   while ($(this).outerHeight() > $(this).parent().height()) {
    $(this).text($(this).text().replace(/\W*\s(\S)*$/, '...'));
   }
});

// When the window gets resized
$(window).resize(function() {
    $('.js-text').each(function (index) {
       $(this).text(initialValues[index]);
       while ($(this).outerHeight() > $(this).parent().height()) {
        $(this).text($(this).text().replace(/\W*\s(\S)*$/, '...'));
       }
    });
});

Answer 2

我看到了两种方法：

1) 在需要时将全文存储为属性。这样，您的文本将保留在您的 div 中，并且可以通过简单的 .attr 进行扩展。

2) 将文本存储在数组中，并将索引作为属性存储在 div 上。这种方式可能比前一种方式更有效，因为我不确定属性值的最大长度是多少。

Answer 3

你的功能一syntax error

var initialValues = [];

// Save the initial data
    $('.js-text').each(function () {
        initialValues.push($(this).text());
    });

// On start
    while ($('.js-text').outerHeight() > $('.js-text-truncator').height()) {
        $('.js-text').text(function (index, text) {
            return text.replace(/\W*\s(\S)*$/, '...');
        });
    }

// When the window gets resized
$(window).resize(function() {
    $('.js-text').text(function () { return initialValues[$('.js-text').index($(this))]; });
    while($('.js-text').outerHeight() > $('.js-text-truncator').height()) {
      $('.js-text').text(function(index, text) {
        return text.replace(/\W*\s(\S)*$/, '...');
      });
    }
});

演示链接http://jsfiddle.net/1ddxtpke/2/