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

2012-07-19

jquery 选中一个li在第四个li后插入新的liulli1/lili2/lili3/lili4/lili5/lili6

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>

[解决办法]
真心看不懂你的需求。。
[解决办法]

HTML code

<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>
[解决办法]
<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>

热点排行

JavaScript

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