Accéder au contenu de l'élément actuellement sélectionné dans une instruction html (val) dans jQuery?

Question

J'ai plusieurs liens dont le contenu de texte je voudrais remplacer avec une image générée automatiquement basée sur le contenu du texte.

Il ressemble actuellement à ceci:

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

et je voudrais avoir soit

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

ou

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

Comment accéder à l'élément en question dans une .replaceWith ou .html afin que je puisse obtenir le contenu du texte?

Answer 1

essayer cette

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

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

}); 

Answer 2

utilisant les sélecteurs localisés

$(".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

code de démonstration

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

Essayez quelque chose comme ça ...

$(".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); 
});