Javascript Rails 4 jQuery截断字符串

想要实现。。。例如，当文本的长度大于150个字符时，这是我的jQuery代码

jQuery(document).ready(function($){
  $("#content p").each(function(){
    if ($(this).text().length > 150) {
      $(this).text($(this).text().substr(0, 145));
      $(this).append('...');
    }
  });
});

这是我的看法

<div id="content">
  <p><%= job.job_description.html_safe %></p>
</div>

---

但问题是，jQuery代码只适用于第一个工作描述，为什么？

如果您不介意使用ruby进行此操作，可以使用

您可以尝试以下方法：

truncate("Once upon a time in a world far far away")
# => "Once upon a time in a world..."

truncate("Once upon a time in a world far far away", length: 17)
# => "Once upon a ti..."

truncate("Once upon a time in a world far far away", length: 17, separator: ' ')
# => "Once upon a..."

truncate("And they found that many people were sleeping better.", length: 25, omission: '... (continued)')
# => "And they f... (continued)"

truncate("<p>Once upon a time in a world far far away</p>")
# => "&lt;p&gt;Once upon a time in a wo..."

truncate("<p>Once upon a time in a world far far away</p>", escape: false)
# => "<p>Once upon a time in a wo..."

truncate("Once upon a time in a world far far away") { link_to "Continue", "#" }
# => "Once upon a time in a wo...<a href="#">Continue</a>"

---

在与您的情况类似的情况下，只有第一个可以在javascript中工作，您在DOM查询中使用元素的id，这是因为有多个具有相同id值的DOM元素。您需要确保DOM中的每个元素都有唯一的id，这是DOM文档有效所必需的

使用id选择器时，无论文档中有多少个id相同的元素，都会返回第一个id为的元素。当然，DOM中必须至少存在一个id为的元素，否则选择器将找不到任何东西

因此，作为一种解决方案，您可以对这些元素使用具有相同值的html类属性。与id不同，类可以重用

大致如下：

# In your view
<div class="content">
  <p><%= job.job_description.html_safe %></p>
</div>


# JQuery
jQuery(document).ready(function($){
  $(".content p").each(function(){
    if ($(this).text().length > 150) {
      $(this).text($(this).text().substr(0, 145));
      $(this).append('...');
    }
  });
});

---

如果您使用tinymce之类的文本编辑器，请尝试使用此代码来保护html_

   <div class="content">
     <p><%= truncate(job.job_description, length: 170, escape: false).html_safe %></p>
   </div>

---

你想使用jQuery而不是ruby helper方法，有什么特别的原因吗？我不知道这是否只发生在我身上，当我使用ruby helper方法时，它会工作，但当悬停文本时，它会移动，我不知道为什么？对不起，我不太明白你的意思。就像你写了一个助手，它会截断你的文本，但是当你把鼠标悬停在上面时，它会显示整个文本块？而当你把鼠标悬停在我的文本上时，它会像这样动态地改变左边的边距-50px-40px。。。。0px。。。因此，您可以模拟文档中文本的移动：结果标记为HTML安全，但默认情况下会转义，除非：escape为false。如果文本包含HTML标记或实体，则应小心，因为截断可能会产生无效的HTML，例如不平衡或不完整的标记。如何使用ruby helper方法使HTML\u安全，因为如果使用此代码，它将不会转换为HTML_safe@user3330161，请看一看。

   <div class="content">
     <p><%= truncate(job.job_description, length: 170, escape: false).html_safe %></p>
   </div>