CODEWITHSUNDEEP
jqueryhtml
Adamtan
Adamtan

Reputation: 253

How to wrap certain words with html tag in a html structure

I have this html structure given below on the course's dates.

<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>

I want to wrap the date format like "st", "th" and "rd" with a SPAN tag like the following output structure. Wondering how to achieve this so that I can style it with 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>

Upvotes: 0

Views: 105

Answers (5)

Kamil Szymański
Kamil Szymański

Reputation: 950

Make your own replacer() function:

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

Test here:

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

Upvotes: 0

c.P.u1
c.P.u1

Reputation: 17094

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

jsFiddle Demo

Upvotes: 2

Neeraj
Neeraj

Reputation: 4489

Try This

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

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

Upvotes: 0

Farhad
Farhad

Reputation: 752

    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);
    });

Use this script after including jquery library

Upvotes: 0

Umarfaruk M
Umarfaruk M

Reputation: 340

You have to set style position:relative for <span> tag and move it to top using CSS.

DEMO: jsfiddle.net/zqr2Q/

Upvotes: 0

Related Questions