針對每個類，並返回一個字符串和類

Question

我想添加一個「粉紅色」跨度類到字符串的末尾。

我可以得到這個與一個元素一起工作，但是當頁面加載多個時，它只會返回第一個元素。

我創建了一個jSFiddle

在此的jsfiddle是兩個頭銜：

20 Smithsons街

25瓊斯街

但它只是返回20 Smithsons街。

他們有什麼辦法可以針對每個元素？

我jQuery是如下：

// Style The Last Element In The Property h3 string 

function change_colour() 
{ 
    var property_title = $('.property-title').html(); 

    var lastWord = property_title.substring(property_title.lastIndexOf(" ")+1); 
    var lastIndex = property_title.lastIndexOf(" ") 
    var property_title = property_title.substring(0, lastIndex); 
    var style = '<span class="pink"> '+lastWord+'</span>'; 

    return property_title + style; 
} 

$(".property-title").each(function() { 
    $('.property-title').html(change_colour()); 
}); 

感謝

Answer 1

一個鮮爲人知的事情是，你可以通過一個函數來jQuery的html()方法：

function change_colour(index, html) 
    var lastWord = html.substring(html.lastIndexOf(" ")+1); 
    var lastIndex = html.lastIndexOf(" ") 
    html = html.substring(0, lastIndex); 
    var style = '<span class="pink"> '+lastWord+'</span>'; 

    return html + style; 
} 

$(".property-title").html(change_colour); // reference to function! 

Answer 2

您需要引用當前產權：

var property_title = $(this).html(); 

Answer 3

問題是此行

var property_title = $('.property-title').html(); 

它總是提取第一個匹配元素的HTML，按照documentation。

您應該將感興趣的元素作爲參數傳遞（或this），因爲您已在.each回調中有此信息。

使用參數：

$(".property-title").each(function() { 
    $('.property-title').html(change_colour(this)); 
}); 

function change_colour(el) 
{ 
    var property_title = $(el).html(); 

    // the rest as before 
} 

使用this：

$(".property-title").each(function() { 
    $('.property-title').html(change_colour.call(this)); 
}); 

function change_colour() 
{ 
    var property_title = $(this).html(); 

    // the rest as before 
} 

Answer 4

的問題是，你不能傳遞正確的參考change_color（）methos。

試試這個解決方案。

$(".property-title").each(function() { 
      var property_title = $(this).html(); 

    var lastWord = property_title.substring(property_title.lastIndexOf(" ")+1); 
    var lastIndex = property_title.lastIndexOf(" ") 
    var property_title = property_title.substring(0, lastIndex); 
    var style = '<span class="pink"> '+lastWord+'</span>'; 
    $(this).html(property_title + style); 
}); 

Answer 5

通行證中的元素，並用它來捕捉產權：

function change_colour(el) { 
    var property_title = $(el).html(); 
    var lastWord = property_title.substring(property_title.lastIndexOf(" ")+1); 
    var lastIndex = property_title.lastIndexOf(" ") 
    var property_title = property_title.substring(0, lastIndex); 
    var style = '<span class="pink"> '+lastWord+'</span>'; 
    return property_title + style; 
} 

$(".property-title").each(function() { 
    $(this).html(change_colour(this)); 
}); 

Demo