javascript - 使用 JQuery 隐藏字符串开头的文本

Question

我有一个网络托管的软件，我需要在字符串的开头公开某种排序值，以使项目以正确的顺序显示。该软件会自动按字母顺序对值进行排序，因此我计算了一个排序值，并且输出现在按年龄顺序很好地排序，如下所示:

• 大卫001岁
• 033岁的安娜贝尔
• 055岁的卡罗尔
• 065岁的比尔

我想让软件使用这些值对值进行排序，但我希望浏览器只实际显示该人的姓名:

• 大卫
• 安娜贝尔
• 卡罗尔
• 比尔

我想知道是否可以在 JQuery 中编写一个脚本来监听包含“Years Old ”的文本，然后从显示中删除前 14 个字符，例如类似的东西

$(".DIV:contains(' Years Old ')").html(
  //Here I would like to show only the text after the first 14 characters
);

如果有人对如何实现上述目标有任何想法或对如何实现它有更好的想法，那么我将非常感谢您的意见!

Answer 1

要从 div 文本中删除前 14 个字符，您可以向 text() 提供一个函数，该函数接受当前文本值作为参数。然后，您可以使用 substring() 删除前 N 个字符并返回结果来更新元素。试试这个:

$('div').text((i, t) => t.substring(14));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>001 Years Old David</div>
<div>033 Years Old Annabelle</div>
<div>055 Years Old Carol</div>
<div>065 Years Old Bill</div>

但是值得注意的是，这并不是一个最佳解决方案。假设可能的话，更好的方法是将排序索引放入 div 上的 data 属性中。然后您可以简单地按此顺序进行排序，而不必担心事后修改文本。像这样的事情:

$('#container div').sort((a, b)  => $(a).data('order') < $(b).data('order') ? -1 : 1).appendTo('#container');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div data-order="65">Bill</div>
  <div data-order="55">Carol</div>
  <div data-order="1">David</div>
  <div data-order="33">Annabelle</div>
</div>