在jQuery的html（val）語句中訪問當前選定元素的內容？

Question

我有幾個鏈接其文本內容我想用基於文本內容的自動生成的圖像替換。

所以目前看起來是這樣的：

<a href="blabla" class="mLink"> 
<span class="mText">The Text in Question</span> 
</a> 

，我想有兩種

<a href="blabla" class="mLink"> 
<img src="/ImageTextHandler.ashx?message=The+Text+in+Question" alt="The Text in Question"/> 
</a> 

或

<a href="blabla" class="mLink"> 
<span class="mText"> 
    <img src="/ImageTextHandler.ashx?message=The+Text+in+Question" alt="The Text in Question"/> 
</span> 
</a> 

如何訪問元素在問題裏面.replaceWith或.html，以便我可以獲取文本內容？

Answer 1

試試這個

$(".mLink").each(function (i) { 

    var thisText = $(this).find(".mText").text(); 
    $(this).html("<img src='/ImageTextHandler.ashx? 
     message=" + thisText + "' alt='" + thisText + "'/>"); 

}); 

Answer 2

使用本地化的選擇

$(".mLink").each(function() { 
    var text = $("span", this).text(); 
    $("span", this).replaceWith("<img src='/ImageTextHandler.ashx?message="+ 
            text+"' alt='"+text+"' />"); 
}); 

Answer 3

$(function() {  
    var mySpan = $('a.mLink span.mText'); 
    var text = mySpan.text(); 
    var link = text.split(' ').join('+'); 

    mySpan.replaceWith($("<img src='/ImageTextHandler.ashx?message=" + link + "' alt='" + text + "'/>")); 
}); 

Working Demo here

代碼從演示

$(function() { 

    $('#button').click(function() { 

     $('a.mLink span.mText').each(function() {  
     var text = $(this).text(); 
     var link = text.split(' ').join('+'); 
     $(this).replaceWith($("<img src='/ImageTextHandler.ashx?message=" + link + "' alt='" + text + "'/>")); 
     }); 

    }); 
}); 

Answer 4

嘗試這樣的事情......

$(".mText").each(function(){ 
    var url = "/ImageTextHandler.ashx?message=" + escape($(this).text()); 
    var image = $("<img>"); 
    image.attr("src") = url; 
    image.attr("alt") = $(this).text(); 
    $(this).text(""); 
    $(this).append(image); 
});