1

jquery を使用して定義クラスまたはタグの最初の色を変更しようとしています。うまくいきますが、独自のスパンがあり、問題を引き起こしているタイトルが 1 つあります。以下のコードを使用して、最初の単語にスパン要素とインライン スタイルを追加しています。

$(document).ready(function()
{

    $('.header-logo, h1').each(function() {
        var h = $(this).html();
        var index = h.indexOf(' ');
        if(index == -1) {
            index = h.length;
        }
        $(this).html('<span style="color:black;">' + h.substring(0, index) + '</span>' + h.substring(index, h.length));
    });

});

これは完全にスパンタグを追加し、色も変更しています。しかし、以下のhtml構造を持つタイトルが1つあります

<h1>
    <span id="fav" class="btn-fav"><a href="#"Add to fav</a></span>
    <span class="the-title">Title text goes here</span>
</h1>

ここでは、「タイトルテキストがここに入る」最初の単語 (タイトル) にのみ色を追加したいのですが、javascript は、スパンタグに別のスパンタグを追加して構造を壊します。

<span style="color:black;">
<span< span=""> class="btn-fav id="fav">.....

では、どうすればこの問題を解決できますか?

4

2 に答える 2

4

htmlメソッドを使用htmlし、関数を受け入れ、最初の単語を見つけてspan要素でラップすることができます。

$('h1 .the-title').html(function(i, html){
   return html.replace(/(\w+\s)/, '<span class="black">$1</span>')
})​;

http://jsfiddle.net/AuKWT/

マークアップを修正する必要があることに注意してください。

<span id="fav" class="btn-fav"><a href="#"Add to fav</a></span>
                                   ------^

$('.header-logo, h1').each(function() {
    var $this = $(this), $title = $this.find('.the-title');
    if ($title.length) {
        $title.html(function(i,h) {
            return h.replace(/(\w+\s)/, '<span class="black">$1</span>')
        })
    } else {
        $this.html(function(i,h) {
            return h.replace(/(\w+\s)/, '<span class="black">$1</span>')
        })
    }
});
于 2012-12-30T10:16:09.880 に答える
2

指定されたクラス要素のいずれかが最初に出現する色を変更しようとしていると思います。そのためには、HTML全体を変更する必要はありません 

 $('.header-logo h1 ').find('.the-title').html(function(i, h){
    return h.replace(/\w+\s/, function(firstWord){
      return '<span style="color:Green;font-weight:bold">' + firstWord + '</span>';
    }); 
 });
于 2012-12-30T10:14:22.717 に答える