How to apply CSS class to a split string


Tags: jquery,html,css,xslt

Problem :

I have some HTML content which are generated using XSL:

<span class="hrsDisp">Sunday: Closed</span>
<span class="hrsDisp">Monday &amp; Tuesday: 8 AM - 7 PM</span>
<span class="hrsDisp">Tuesday &amp; Wednesday: 7 AM - 7 PM</span>
<span class="hrsDisp">Mon, Wed, &amp; Fri: 7 AM - 5:30 PM</span>

XSL:

<span class="hrsDisp">
    <xsl:value-of select="txtHours" />
</span>

I am trying to set the text before the : to bold using JQuery. I have the following which gets the string but the alert statement only displays one alert, even though there are multiple entries:

$(function () {
    var theTime = $(".hrsDisp").text().split(":")[0];
    alert(theTime);
});

The above doesn't work as expected but doesn't throw any error either. I added the following line to add the class:

theTime.addClas("setBold");

And I get an uncaught error exception in the console.

The final script which I thought would work is:

$(function () {
    var theTime = $(".hrsDisp").text().split(":")[0];
    alert(theTime);
    theTime.addClass("setBold");
});

Instead my page is not displayed correctly and I get the error in the console.

Please help me resolve my issue.



Solution :

Try below XSL rule instead of javascript manipulation:

<span class="hrsDisp">
    <strong><xsl:value-of select="substring-before(txtHours, ':')" /></strong>:
    <xsl:value-of select="substring-after(txtHours, ':')" />
</span>

Alternatively you can use jQuery in this way:

$(function () {
    $(".hrsDisp").html(function(i, old) {
        return '<strong>' + old.split(":").join('</strong>:');
    });    
});

    CSS Howto..

    How to fix this css float problem?

    how to put html inside php code [closed]

    Selenium how to access two controls of same css class

    How to create text block over the images with css and make it responsive

    How to pass parameter in CSS and then how to apply if..else on that parameter in ASP.NET?

    jQuery glowing animations : how to improve?

    Dompdf - how to display table and graph sidebyside?

    How to move a div's border “up” one pixel with css

    how to change the colour property of tag used for a text

    CSS image rollover map and jQuery : how to use a second li list?

    How to design a CSS for a centered floating confirm dialog?

    JQuery UI Elements' Image not shown

    This panel keeps getting position: absolute applied. How can I stop it?

    How Do I Use Css To Select A Area Of Code

    How to get a website's position setup in a way that an image is centred?

    How to handle long string where characters stick together

    How to center data table header and data using in bootstrap w/o using CSS?

    How to stop jquery loop function by a click while starting another loop function

    How to change css elements in HAML dependent on what page is calling for the content?

    How to place HTML elements over inline SVG

    How to make first letter lowercase in span with css?

    How to get just the responsive grid from Bootstrap 3?

    how to show an arrow to the only li item that has sub-menu

    How to cancel an upstream CSS declaration?

    How can I add an external stylesheet to a UIWebView in Xcode?

    How to include 3 background images in a single css?

    How to add hover effect to menu using jQuery

    How to ensure that columns are contained within a row

    How to make the posts of a content type horizontal scrollabel?

    Right side border gradient only with the newer webkit gradient syntax, also which browsers support this, and how to do it in those as well?