jquery 选中一个li在第四个li后安插新的li
日期：2014-05-16 浏览次数：20408 次
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>
------解决方案--------------------
真心看不懂你的需求。。
------解决方案--------------------
<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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
