jquery 选中一个li在第四个li后插入新的li

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>如果说 一行 4个li
当鼠标点击 某个li 在li所在行 最后一个li后 添加新的 <li class="detail" width="100%">详细内容</li>

解决方案 »

  1.   


    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    </ul>
    <script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
    <script>
    $(function(){
    var s = "li[class!=detail]";
    $(s).click(function(){
    var n = $(this).index(s);
    var m = $(s).size();
    var p = 3-n%4;
    var i = n+p<m?n+p:m-1;
    if($(s).eq(i).next().attr("class")!="detail" ) $(s).eq(i).after("<li class=\"detail\" width=\"100%\">详细内容</li>");
    });
    })
    </script>
      

  2.   

    <script type="text/javascript" src="jquery-1.3.1.js"></script><style type="text/css"> 
     #ul1
     {
       list-style-type : disc;
     }
     #ul1 li
     {
       width:80px;
       float:left; 
     }
     .detail
     {
       width:80px;
       float:left; 
     }</style><script type="text/javascript">$(document).ready(function(){
       
    $("#ul1 li").bind("click",function(){
    alert("添加<li>");
    $(this).parent().append("<li class='detail'>详细内容</li>");
    });});</script>
    <title>无标题文档</title>
    </head><body>
    <span>测试</span>
    <div style="width:600px;height:200px;border:1px solid red;">
    <ul id="ul1">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    </ul>
    </div>
    </body>
    </html>
      

  3.   

    谢谢hookee功能已经实现，感谢各位回帖。