javascript - 点击后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);
 });
});