JS动态控制列表宽度

< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
     < title ></ title >
     < style  type ="text/css" >
        .example1
         {
            border : 1px solid #800000 ;
            float : left ;
            padding : 10px ;
         }
        .example2
         {
            border : 1px solid #800000 ;
            float : left ;
            padding : 10px ;
            margin-top : 10px ;
         }
        .all
         {
            font-size : 14px ;
            width : 330px ;
         }
        .one
         {
            float : left ;
            overflow : hidden ;
            height : 25px ;
            color : Gray ;
         }
        .two
         {
            float : left ;
            color : Green ;
         }
     </ style >
     < script  src ="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"  type ="text/javascript" ></ script >
     < script  type ="text/javascript" >
        $( function  () {
             var  sumlen  =   320 ;
            $.each($( " .all " ),  function  (index, item) {
                 if  (($( " .one:eq( "   +  index  +   " ) " ).width()  +  $( " .two:eq( "   +  index  +   " ) " ).width())  >  sumlen) {
                     var  length  =  sumlen  -  $( " .two:eq( "   +  index  +   " ) " ).width();
                    $( " .one:eq( "   +  index  +   " ) " ).css( " width " , length  +   " px " );
                }
            });
        });
     </ script >
</ head >
< body >
    Demo 1: < br  />
     < div  class ="example1" >
         < div  class ="all" >
             < div  class ="one" > 测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试 </ div >
             < div  class ="two" > &nbsp; (4/29 12:00:00) </ div >
         </ div >
         < div  class ="all" >
             < div  class ="one" > 测试测试测试试测试测试测试测测试 </ div >
             < div  class ="two" > &nbsp; (4/29 12:00:00) </ div >
         </ div >
         < div  class ="all" >
             < div  class ="one" > 测试测试测试测试测试测试测试测试测试测 </ div >
             < div  class ="two" > &nbsp; (4/29 12:00:00) </ div >
         </ div >
         < div  class ="all" >
             < div  class ="one" > 测试测试测试测试测测试 </ div >
             < div  class ="two" > &nbsp; (4/29 12:00:00) </ div >
         </ div >
         < div  class ="all" >
             < div  class ="one" > 测试测试测试测试测测测试测试测试测测测试测试测试测测测试测试测试测测试 </ div >
             < div  class ="two" > &nbsp; (4/29 12:00:00) </ div >
         </ div >
     </ div >
     < div  style ="clear:both" ></ div >
     < br  />
    Demo 2(去掉时间列): < br  />
     < div  class ="example2" >
         < div  class ="all" >
             < div  class ="one" > 测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试 </ div >
             < div  class ="two" ></ div >
         </ div >
         < div  class ="all" >
             < div  class ="one" > 测试测试测试试测试测试测试测测试 </ div >
             < div  class ="two" ></ div >
         </ div >
         < div  class ="all" >
             < div  class ="one" > 测试测试测试测试测试测试测试测试测试测 </ div >
             < div  class ="two" ></ div >
         </ div >
         < div  class ="all" >
             < div  class ="one" > 测试测试测试测试测测试 </ div >
             < div  class ="two" ></ div >
         </ div >
         < div  class ="all" >
             < div  class ="one" > 测试测试测试测试测测测试测试测试测测测试测试测试测测测试测试测试测测试 </ div >
             < div  class ="two" ></ div >
         </ div >
     </ div >
</ body >

</ html >