突出显示jQuery中单词之间的空格

Highlight empty space between words in jQuery

本文关键字：之间 空格 单词 显示 jQuery      更新时间：2023-09-26

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

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/

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

<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')) {}的条件来检查元素在每个循环中是否有一个"单词p1"类。

$(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/

将空格放在<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 >

要使用类word p1仅突出显示<abbr>元素，只需写入

$('abbr.word.p1').css({background:'0f0'});
相关文章：