0

我在课程日期下面给出了这个 html 结构。

<div class="courses">
    <div class="row">
      <div class="start">01st Jan 2013</div>
      <div class="end">28th Jan 2013</div>
    </div>

    <div class="row">
      <div class="start">03rd Jan 2013</div>
      <div class="end">10th Jan 2013</div>
    </div>
</div>

我想用 SPAN 标签包装日期格式，如“st”、“th”和“rd”，如下面的输出结构。想知道如何实现这一点，以便我可以使用 css 对其进行样式设置。

<div class="courses">
    <div class="row">
      <div class="start">01<span>st</span> Jan 2013</div>
      <div class="end">28<span>th</span> Jan 2013</div>
    </div>

    <div class="row">
      <div class="start">03<span>rd</span> Jan 2013</div>
      <div class="end">10<span>th</span> Jan 2013</div>
    </div>
</div>
4

5 回答 5

2 
$('div.start, div.end').each(function() {
    var date = $(this).text();
    $(this).html(date.replace(/(st|nd|rd|th)/, '<span>$1</span>'));
});

jsFiddle 演示

于 2013-07-30T10:29:29.013 回答
0

您必须position:relative为 <span>标签设置样式并使用 CSS 将其移至顶部。

演示：jsfiddle.net/zqr2Q/

于 2013-07-30T10:11:12.647 回答
0 
    var start = $('.start');
    var end = $('end');

    $.each(start,function(e,item){
        var text = $(item).html();
        var finalCh = text.substr(2,2);
        var newFinalCh = "<span class=\"yourClass\">" + finalCh + "</span>";
        var newText = text.replace(finalCh,newFinalCh);
        $(item).html(newText);
    });

包含 jquery 库后使用此脚本

于 2013-07-30T10:28:43.653 回答
0

尝试这个

$("div .start:contains('st')").html().replace('st','<span>st</span');

alert($("div .start:contains('st')").html().replace('st','<span>st</span'))
于 2013-07-30T10:28:59.797 回答
0

制作自己的 replacer() 函数：

function replacer(what, where) {
    where.html(where.html().replace(what, '<span>' + what + '</span>'));
}

在这里测试：

http://jsfiddle.net/NmHkh/6/

于 2013-07-30T10:38:26.910 回答