Question

我想用<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

Answer 1

jQuery的API有点古怪：html（以及val和其他）的函数可以是 getters 和 setters ，它们是不对称的：当您获取时，它们会为您提供与该组中第一个元素相关的值，但是当您设置时，它们会设置所有集合中的元素。

在这种情况下，您可以将函数传递给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来电只会替换第一个空格。我想这可能就是你想要的，但如果你想替换所有空格，那就是.replace(/ /g, '<br />')。

Answer 2

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

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

在日期替换空格

2 个答案: