JQuery добавление диапазона после нажатия

Question

Привет, как можно добавить новый селектор и заменить текущий на ссылку, которая была нажата? следующие моя связь перед нажатием:

<a href="#">Date</a> 

ссылки после щелчка:

<span title="" class="i-wrap ig-wrap-common i-sort-descend-common-wrap ig-wrap-common-r selected whatsthis"><i class="i ig-common i-sort-descend-common"></i> Date </span> 

Ниже приведен мой фрагмента кода HTML для приведенных выше ссылки:

<div id="review_sort_section" class="ieSucks">Sort by: 


       <a href="#">Date</a> 
      | 
       <a href="#">Rating</a> 
      | 

    </div> 

Спасибо.

Answer 1

$('#review_sort_section a').click(function() { 
    var span = '<span title="" class="i-wrap ig-wrap-common i-sort-descend-common-wrap ig-wrap-common-r selected whatsthis"><i class="i ig-common i-sort-descend-common"></i>' + $(this).text() + '</span>'; 
    $(this).replaceWith(span); 
}); 

Вот демо с обновленными требованиями: http://jsfiddle.net/DDCbe/

Answer 2

$(function(){ 
    $('#review_sort_section a').click(function(){ 
    var new_content='<span title="" class="i-wrap ig-wrap-common i-sort-descend-common-wrap ig-wrap-common-r selected whatsthis"><i class="i ig-common i-sort-descend-common"></i> Date </span>'; 
    $(this).replaceWith(new_content); 
}); 
});