请问$.each怎么应用到我的例子中去？

请问$.each怎么应用到我的例子中去？
下面代码不能运行，请高手矫正：
<html>
<head>
<title>each</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
function color_items(){
$.each($(".color_items span"),function(i,n){
$("#"+i).css({$("#"+i).attr("value"):red});
})
}

$(function(){
color_items();
});
</script>
</head>
<body>
<div class="color_items">
<span value="background-color">body</span>
<span value="background-color">h3</span>
<span value="color">a</span>
<span value="color">a:hover</span>
</div>
</body>
</html>

解决方案 »

  1.   


    <html>
    <head>
    <title>each</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
    <script type="text/javascript">
        function color_items(){
            $.each($(".color_items span"),function(i,n){
                $(this).hover(function(){$(this).css("background","red")},function(){$(this).css("background","none")})
            })
        }
        $(function(){
            color_items();
        });
    </script>
    </head>
    <body>
        <div class="color_items">
            <span value="background-color">body</span>
            <span value="background-color">h3</span>
            <span value="color">a</span>
            <span value="color">a:hover</span>
        </div>
    </body>
    </html>
      

  2.   

    <html>
    <head>
    <title>each</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
    <script type="text/javascript">
        function color_items(){
            $.each($(".color_items span"),function(){
                $(this).css(this.getAttribute("value")+"","red");
            })
        }
        
        $(function(){
            color_items();
        });
    </script>
    </head>
    <body>
        <div class="color_items">
            <span value="background-color">body</span>
            <span value="background-color">h3</span>
            <span value="color">a</span>
            <span value="color">a:hover</span>
        </div>
    </body>
    </html>
      

  3.   

    <html>
    <head>
    <title>each</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
    <script type="text/javascript">
        function color_items(){
            $.each($(".color_items span"),function(i,n){
                $(n).css(n.getAttribute("value")+"","red");
            })
        }
        
        $(function(){
            color_items();
        });
    </script>
    </head>
    <body>
        <div class="color_items">
            <span value="background-color">body</span>
            <span value="background-color">h3</span>
            <span value="color">a</span>
            <span value="color">a:hover</span>
        </div>
    </body>
    </html>
      

  4.   

    谢谢死神哥哥，有点小疑问，为什么不能用 attr({...})这种形式？
      

  5.   

    自定義属性要用getAttribute取得
      

  6.   

    $("div").each(fn)
    和
    $.each(...)
    到底哪个更好用？感觉功能上没什么区别