Доступ к содержимому выбранного элемента в выражении html (val) в jQuery?

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

$(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 + "'/>"));
});

Рабочая демонстрация здесь

Код из демоверсии

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

Использование локализованных селекторов

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