javascript - 突出显示jQuery中单词之间的空白

Question

我是 jQuery 新手，所以我有 2 个问题。

1-如何在此功能中突出显示单词之间的空格？

2-如何突出显示<abbr class="word p1">标签？

HTML 代码：

<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 代码：

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

CSS代码：

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';
    }​

演示：http: //jsfiddle.net/eTyaV/

Answer 1

根据我上面的评论，只需在标签中包含空格即可解决您的空间突出显示问题。

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

至于第 2 点，您可以通过使用类似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/

Answer 2

把空格放在里面<abbr>

.这将解决空白

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

Answer 3

要仅突出显示<abbr>带有类的元素，word p1只需编写

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