Question

想要实现（...）当文本的长度超过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代码只适用于第一个job_description为什么？

Answer 1

如果您不介意使用红宝石，可以使用truncate method。

您可以尝试这样做：

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>"

Answer 2

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

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

因此，作为解决方案，您可以使用具有相同值的html class属性。与id不同，class可以重复使用。

如下所示：

# 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('...');
    }
  });
});

@ 8bithero已经提到的另一种方法，你可以使用Rails TextHelper#truncate来生成截断的文本，而不用担心javascript操作。使用这种方法，您可以删除javascript代码并将view更新为：

# In your view
<div class="content">
  <p><%= truncate(job.job_description, length: 150) %></p>
</div>

Answer 3

如果您使用像tinymce这样的文本编辑器

，请尝试使用此代码转为html_safe

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

Rails 4 jQuery截断字符串

3 个答案: