1

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

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

该网站托管的平台是 Adob​​e 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

4

2 回答 2

2

jQuery 的 API 有点古怪：像html（val和其他）这样既可以是getter又可以是setter的函数是不对称的：当您获取时，它们会为您提供与集合中第一个元素相关的值，但是当您设置时，它们设置在集合中的所有元素上。

在这种情况下，您可以传递一个函数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 />').

于 2014-08-07T19:08:04.380 回答
0

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

$(".callout").each(function(){
    $(".dateNumber").each(function(){
        $(this).html($(this).html().replace(' ', '<br />'));
    });
});
于 2014-08-07T19:07:24.137 回答