javascript循环！

要做如下例子：<a class="links" href="#" style="background-position:0 0px;">xxxxx</a>
<a class="links" href="#" style="background-position:0 16px;">aaaa</a>
<a class="links" href="#" style="background-position:0 32px;">xbbbb</a>
<a class="links" href="#" style="background-position:0 48px;">xbvccx</a>
...
...
...
要让其中的background-position 循环添加，我做了一个可是发现需要用到闭包，我就晕菜了，各位该怎么办啊？

解决方案 »

  1.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
     </HEAD> <BODY>
    <script>
    function change()
    {
    var html='';
    for(var i=0;i<5;i++)
    {
        html+='<a class="links" href="#" style="background-position:0 '+(i*16)+'px;">xxxxx'+i+' </a>';
    }
    document.getElementById('div').innerHTML=html;
    }
    </script>
    <div id='div'>
    </div><input type='button' value='click me' onclick='change();' /> </BODY>
    </HTML>
      

  2.   

    我是要动态添加 style="background-position:0 0px; 这些字符到a标签里， 链接里面的内容都不确定的
      

  3.   

    var a=document.getElementsByTagName("a");
    for(var i=0;i<a.length;i++){
       a[i].setAttribute("style","background-position:xx px");
    }
    楼主是这个意思？
      

  4.   


    <script>
    var getPosition = (function(){
        var p=-1;
        return function(){
          p+=1;
           return "background-position:0 "+(p*16)+"px;";
        }
    })();
    jQuery(function(){
    jQuery("a").each(function(){
    jQuery(this).attr("style",getPosition());
    });
    });
      

  5.   

    楼上的就是了，用了 jQuery，有不用jQuery的吗<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
     <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
    <script>
    var getPosition = (function(){
        var p=-1;
        return function(){
             p+=1;
           return "background-position:0 "+(p*16)+"px;";
        }
    })();
    jQuery(function(){
        jQuery("a").each(function(){
            jQuery(this).attr("style",getPosition());    
        });
    });  
      </script>
         
     
       </HEAD> <BODY>
     
     <a href="#">sss</a>
      <a href="#">sss</a>
      <a href="#">sss</a>
      <a href="#">sss</a>
     
     </BODY>
    </HTML>
      

  6.   

    看看这篇文章，以后就不怕了 呵呵 ~~
    http://blog.csdn.net/xiaofan_sap/archive/2009/11/05/4772625.aspx
      

  7.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    </HEAD><BODY>
    <a href="#">sss</a>
      <a href="#">sss</a>
      <a href="#">sss</a>
      <a href="#">sss</a>
    </BODY>
    <script language="javascript" >
    function test()
    {
    var a=document.getElementsByTagName("a");
    for(var i=0;i<a.length;i++){
    var par="background-position:0 "+(i*16)+"px;";
       a[i].setAttribute("style",par);
    }
    }
    test();
    </script>
    </HTML>