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 make those two divs in one line

    How to modify twitter widget in css

    How to Display a DIV with 'fixed' and 'inline-block' Added to its CSS Properties

    CSS: How to center a bottom-fixed menu

    How to make image stretch to a specific paragraph?

    How do I get the background image to not repeat and take up the entire section?

    How to make a all the three tables to display at same height

    How to increase spacing between dt tags

    How do I change the css of a different element on hover?

    CSS How to hide current child menu items when hovering over parent's sibling items without javascript

    Show span beside select

    How to use Css to make CellList flow Horizontally rather than Vertically? (GWT & CSS)

    how to load multiple lazy css load file

    How to move an entire group of objects with Javascript

    How to control the HTML area to the right?

    How to center div within another div?

    Responsive CSS layout - how to stretch the background overlay

    How can I fade in new HTML elements with CSS [duplicate]

    How to make a custom clickable shape with CSS to cover the exact needed area?

    CSS: How to get position and size relative to screen width?

    How to fix my nav bar? Positioning is different on different screens

    How to apply Sticky Table header design on every ajax refresh which is every 30 seconds?

    How to alter CSS properties using PHP based on a conditional

    css, how to stop an element being squashed by container

    How do I get rid of the big margin between my labels and the input fields?

    how to create divs rowwise in css

    How to adjust width of right-aligned navbar

    jquery div hidden and show, z-index issue and mouseover/mouseout issue

    How to hide and fade div using jquery and css

    How do you associate a css/sass stylesheet to a view in rails?