CODEWITHSUNDEEP
javascriptjquery
KF2
KF2

Reputation: 10153

Highlight empty space between words in jQuery

I'm new in jQuery so i have 2 questions.

1-How can I highlight empty space between words in this function?

2-How can I highlight just <abbr class="word p1"> tag?

HTML Code:

<span id="4">
<abbr class="word p1" >&#xfb62;</abbr>
<abbr class="word p1" >&#xfb63;</abbr>
<abbr class="word p1" >&#xfb64;</abbr>
<abbr class="word p1" >&#xfb65;</abbr>
<abbr class="end p1" >&#xfb66;</abbr>
</span >

JavaScript Code:

$(function(){
    var time = 5;
    $("abbr", "#4").each(function(i,e) {
        $(e).delay(i*((time*1000)/$("abbr", "#4").length)).animate({'background-color': '#0f0'}, 500);
    });
});​

Css Code:

span
{
    text-align:justify;
    float:right;
}

    @font-face {
        font-family: 'p1';
        src: url('http://c216429.r29.cf1.rackcdn.com/p1.eot?#iefix') format('embedded-           opentype'),
             url('http://c216429.r29.cf1.rackcdn.com/p1.woff')       format('woff'),
             url('http://c216429.r29.cf1.rackcdn.com/p1.ttf')        format('truetype'),
             url('http://c216429.r29.cf1.rackcdn.com/p1.svg#p1')    format('svg');
    }

    .p1 {
        font-family: 'p1';
    }​

Demo: http://jsfiddle.net/eTyaV/

Upvotes: 0

Views: 546

Answers (3)

peter
peter

Reputation: 185

To highlight only <abbr> elements with class word p1 just write

$('abbr.word.p1').css({background:'0f0'});

Upvotes: 0

user1625653
user1625653

Reputation:

put the spaces inside the <abbr>

.this will solw empty space

<span id="4">
    <abbr class="word p1" >&#xfb62; </abbr>
    <abbr class="word p1" >&#xfb63; </abbr>
    <abbr class="word p1" >&#xfb64; </abbr>
    <abbr class="word p1" >&#xfb65; </abbr>
    <abbr class="end p1" >&#xfb66;</abbr>
</span >

Upvotes: 1

Jeemusu
Jeemusu

Reputation: 10533

As per my comment above, just include the spaces within the tags to solve your space highlighting issue. 

<span id="4">
    <abbr class="word p1" >&#xfb62; </abbr>
    <abbr class="word p1" >&#xfb63; </abbr>
    <abbr class="word p1" >&#xfb64; </abbr>
    <abbr class="word p1" >&#xfb65; </abbr>
    <abbr class="end p1" >&#xfb66;</abbr>
</span >

As for point 2, you could check to see if the element has a class of "word p1" in your each loop, by using a condition like if($(e).hasClass('word')) {}.

$(function(){
    var time = 5;

    $("abbr").each(function(i,e) {

        if($(e).hasClass('word')) {  
            $(e).delay(i*((time*1000)/$("abbr").length)).animate({'background-color': '#0f0'}, 500);
        }
    });
});​

http://jsfiddle.net/eTyaV/7/

Upvotes: 1

Related Questions