在日期上用 <br /> 替换空格答案

【问题标题】：Replace spaces with <br /> on a date在日期上用 <br /> 替换空格
【发布时间】：2014-10-01 03:33:53
【问题描述】：

我想用 <br /> 标签替换 dateTime 渲染文本上的空格。

我编写的代码会这样做，但由于某种原因，我的所有日期都变成了相同的日期。我不知道为什么会这样。

本网站托管的平台是 Adobe Business Catalyst。

html:

<div class="panel callout radius columns small-12 medium-6 large-4 {tag_event month}" data-event-date="{tag_event date (for sorting)}">
    <div class="dateNumber" data-bc-date="format:MMM DD">{tag_event date (for sorting)}</div>
    <span><a href="{tag_itemurl_nolink}">{tag_short title}</a></span>
</div>

jQuery:

// If I run this, it will change all the rendered dates into Aug 7
$(".callout").each(function(){
    $(".dateNumber").html($(".dateNumber").html().replace(' ', '<br />'));
});

直播页面：http://www.blackduckmn.com/calendar

【问题讨论】：

执行forEach，其中replace，.html() 将获得第一场比赛的HTML
@PaulS。你能给我一个例子来说明你的意思吗？谢谢。

标签： javascript jquery datetime business-catalyst

【解决方案1】：

jQuery 的 API 有点古怪：像 html（和 val 等）这样既可以是 getter 又可以是 setter 的函数是不对称的：当你'重新 getting，它们会为您提供与集合中的 first 元素相关的值，但是当您 setting 时，它们会在 上设置>集合中的所有元素。

在这种情况下，您可以将一个函数传递给html，该函数将为每个元素调用：

$(".callout .dateNumber").html(function(){
    return $(this).html().replace(' ', '<br />');
    // Or: return this.innerHTML.replace(' ', '<br />');
});

当您给html 一个函数时，它会为每个元素调用该函数，然后将元素的 HTML 设置为您从该函数返回的任何内容。

完整示例：Live Copy

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <meta charset="utf-8">
  <title>Example</title>
</head>
<body>
<div class="panel callout radius columns small-12 medium-6 large-4">
    <div class="dateNumber" data-bc-date="format:MMM DD">Aug 07</div>
    <span><a href="#">Title here</a></span>
</div>
<div class="panel callout radius columns small-12 medium-6 large-4">
    <div class="dateNumber" data-bc-date="format:MMM DD">May 08</div>
    <span><a href="#">Title here</a></span>
</div>
<div class="panel callout radius columns small-12 medium-6 large-4">
    <div class="dateNumber" data-bc-date="format:MMM DD">Jun 09</div>
    <span><a href="#">Title here</a></span>
</div>
<script>
$(".callout .dateNumber").html(function(){
    return $(this).html().replace(' ', '<br />');
    // Or: return this.innerHTML.replace(' ', '<br />');
});
</script>
</body>
</html>

旁注：您的replace 调用只会替换第一个空格。我认为这可能是您想要的，但如果您想替换 all 的空格，那就是.replace(/ /g, '<br />')。

【讨论】：

似乎我现在遇到了问题，它试图在
<div<br />...
@Phorden：以上只会查看.dateNumberdiv内部的HTML。它工作的字符串不会有<div class="dateNumber" data-bc-date="format:MMM DD"> 或</div> 部分，只有它们之间的部分。（我很短暂地选择了错误的选择器，也许你碰巧抓住了错误的代码？我在几秒钟内纠正了它，但是......在上面，请注意选择器是".callout .dateNumber" - 如果那不是你复制的，再试一次。）
我认为你是对的。我理解这段代码应该如何工作，但它似乎没有修改它。不知道是不是和第三方插件moment.js已经格式化日期有关。
我通过将代码与外部 JS 文件分离来修复了我的示例版本。它现在正在工作。感谢您的帮助。

【解决方案2】：

正如保罗所说，您需要单独替换每个内容，这应该会得到您想要的结果。

$(".callout").each(function(){
    $(".dateNumber").each(function(){
        $(this).html($(this).html().replace(' ', '<br />'));
    });
});

【讨论】：