使用 jquery 的 .each 循环答案

【问题标题】：Looping using jquery's .each使用 jquery 的 .each 循环
【发布时间】：2014-07-09 16:41:45
【问题描述】：

我有一串日期，我希望在第一个逗号处截断。例如，我想：

今天，2014 年 7 月 9 日
2014 年 7 月 10 日，明天
2014 年 7 月 11 日

显示：

今天
明天
7 月 11 日

使用：

var longDay = $('.daily_forecast').text(); 
var shortDay = jQuery.trim(longDay).substring(0, 12).split(',').slice(0, -1);
$('.daily_forecast').replaceWith('<span>' + shortDay + '</span>');

将正确截断内容，但是，所有结果都返回“今天”。

我认为我需要使用 .each 遍历元素，但这样做有困难。

谢谢。

【问题讨论】：

你是正确的，你需要循环。请附上您尝试过但不起作用的代码。
请发布您正在使用的 HTML。
James Montagne 和 j08691，非常感谢您的关注。我最终使用了完美运行的 Barmar 代码。

标签： jquery truncate each

【解决方案1】：

将函数传递给.html()。它将在每个匹配选择器的元素上调用，并接收旧内容作为参数。然后它可以退回替换件。

$('.daily_forecast').html(function(index, longDay) {
    var shortDay = jQuery.trim(longDay).substring(0, 12).split(',').slice(0, -1);
    return '<span>' + shortDay + '</span>';
});

DEMO

如果原始元素包含 HTML 而不是纯文本，并且您需要在替换之前删除所有标记，则需要明确使用 .each：

$('.daily_forecast').each(function() {
    var longDay = $(this).text();
    var shortDay = jQuery.trim(longDay).substring(0, 12).split(',').slice(0, -1);
    $(this).html('<span>' + shortDay + '</span>');
});

您可能不想使用.replaceWith，因为这会删除整个.daily_forecast 元素。使用.html() 替换其内容。

【讨论】：

不，它独立地对每个匹配元素进行操作。有一个隐含的.each() 由 jQuery 自动完成。
这里的细微差别是原始代码读取的是text，而不是html。不可能说这是否是一个重要的区别，因为问题不包括相关的 html。同样，replaceWith 将替换元素，而这会将跨度插入元素。

【解决方案2】：

使用正则表达式

$('.daily_forecast').html(function(index, longDay) {
    var shortDay = jQuery.trim(longDay).match(/[\w\s]+(?=,)/)[0]
    return '<span>' + shortDay + '</span>';
});

fiddle

【讨论】：