求助一个比较难的jquery效果

<em class="abc" val="id=1">12</em>
<em class="abc" val="id=2">34</em>
<em class="abc" val="id=3">56</em>
用jquery 把上面三行代码中的em 换成a，把val换成href最后弹出href的值，不要让我直接把em写成a,val写成href,我要的是页面加载完动态改变的

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

随便写了个$(function(){
$("em[val]").each(function(){
var $a=$(this.outerHTML
.replace(/EM/g,"a")
.replace(/em/g,"a"));
$(this).replaceWith($a);
})
$("a[href]").click(function(){
var $a=$(this);
$a.attr("href",$a.attr("val")).removeAttr("val");
alert($a.attr("href"));
});
});
经测试，不管用代码如下:<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(function(){
    $("em[val]").each(function(){
        var $a=$(this.outerHTML
                .replace(/EM/g,"a")
                .replace(/em/g,"a"));
        $(this).replaceWith($a);
    })
    $("a[href]").click(function(){
            var $a=$(this);
            $a.attr("href",$a.attr("val")).removeAttr("val");
            alert($a.attr("href"));
        });
});
</script><em class="abc" val="id=1">12</em>
<em class="abc" val="id=2">34</em>
<em class="abc" val="id=3">56</em>
<script type="text/javascript">
    $(function(){
        $("em[val]").each(function(){
            alert($(this).replaceWith($(this.outerHTML.replace(/em/ig,"a").replace(/val/g,"href"))).attr("val"));
        });
    });
</script>
经测试，不管用代码如下:<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(function(){
    $("em[val]").each(function(){
        var $a=$(this.outerHTML
                .replace(/EM/g,"a")
                .replace(/em/g,"a"));
        $(this).replaceWith($a);
    })
    $("a[href]").click(function(){
            var $a=$(this);
            $a.attr("href",$a.attr("val")).removeAttr("val");
            alert($a.attr("href"));
        });
});
</script><em class="abc" val="id=1">12</em>
<em class="abc" val="id=2">34</em>
<em class="abc" val="id=3">56</em>

没注意，你把 $("a[href]").click(function(){ 这行的a[href]修改为a[val]
++不过， outerHTML 在某些的浏览器似乎是不支持的，稍稍改了一下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript">
        $.fn.myOuterHTML = function () {
            return this.outerHTML ? this.outerHTML : $(this).clone().wrap("<p></p>").parent().html();
        }
        $(function () {
            $("em[val]").each(function () {
                $(this).replaceWith(
                    $($(this).myOuterHTML().replace(/em/ig, "a").replace(/val/g, "href"))
                );
            });
        });
    </script>
</head>
<body>
    <em class="abc" val="id=1">12</em>
    <em class="abc" val="id=2">34</em>
    <em class="abc" val="id=3">56</em>
</body>
</html>
查询元素 :查找要替换的em
创建元素  ：创建a元素
读取元素属性：从em中读取val属性
修改元素属性：把a的href设置成读取的val
插入元素：在em的位置插入a
删除元素：删除em你要的结果就是这个过程  got it
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript">
        $.fn.myOuterHTML = function () {
            return this.outerHTML ? this.outerHTML : $(this).clone().wrap("<p></p>").parent().html();
        }
        $(function () {
            $("em[val]").each(function () {
                $(this).replaceWith(
                    $($(this).myOuterHTML().replace(/em/ig, "a").replace(/val/g, "href"))
                );
            });
        });
    </script>
</head>
<body>
    <em class="abc" val="id=1">12</em>
    <em class="abc" val="id=2">34</em>
    <em class="abc" val="id=3">56</em>
</body>
</html>