針對下一個字符的jquery

Question

我試圖定位下一個'。'在使用jQuery的標題。

所以現在的標題是

<h1 class="page-head">Explore. Think. Connect.</h1> 

和我的jQuery是

$(h1.page-head:contains(.)').each(function(){ 
    $(this).html(
    $(this).html().replace('.','<span class=\'nice-point\'>&#46;</span>') 
); 
}); 

我想知道如何定位的其他2 ''分別添加樣式給他們。

任何幫助將不勝感激！

Answer 1

如果您想對出現的每個事件應用特定的樣式，您可以按照文本中出現的點的順序排列希望應用的樣式。

like。

$("h1.page-head:contains(.)").each(function(){ 

    newHTML = $(this).html() 
    .replace('.','<span style=\'color:#F00;\'>&#46;</span>') 
    .replace('.','<span style=\'color:#40F;\'>&#46;</span>') 
    .replace('.','<span style=\'color:#0F4;\'>&#46;</span>')  

    $(this).html(newHTML); 


}); 

這裏是一個demo fiddle

上面的例子分別適用style=\'color:#F00;\'至第一點，style=\'color:#40F;\'至第二點，style=\'color:#0F4;\'到第三點。我認爲這是你的意思，分別添加樣式到每個點。對不起，如果我錯了。

Answer 2

這樣的事情，使用the overload of .html() which accepts a function:

$('h1.page-head:contains(.)').html(function (index, oldHtml) { 
    return oldHtml.replace(/\./g, '<span class="nice-point">&#46;</span>'); 
}); 

如果你想要做的事對於每個.不同的oldHtml，你可以更大膽的嘗試，since replace() accepts a function as well，或者你可以使用任何其它所需的字符串操作：

$('h1.page-head:contains(.)').html(function (index, oldHtml) { 
    // equivalent to the code above; just an example 
    return oldHtml.split('.').join('<span class="nice-point">&#46;</span>'); 
});