jQuery 存储 .each() .text() 以进行截断？

Question

我之前问过类似的问题，但没有提供足够的上下文。结果，我收到了一个优秀的、技术上正确的答案，但没有解决我的问题。

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

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

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

$(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 类所有文本存储在一起然后吐出每当使用类时。

这是问题的 jsFiddle：

http://jsfiddle.net/1ddxtpke/

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

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

提前感谢您解答我的问题。我希望我在寻找什么方面足够具体。

Answer 1

我看到了 2 种方法：

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

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

Answer 2

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

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 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)*$/, '...');
      });
    }
});

演示 Link http://jsfiddle.net/1ddxtpke/2/

jQuery 存储 .each() .text() 以进行截断？

jQuery store .each() .text() for truncation possible?

javascript

jquery

html

css

truncation