jquery根据一个ul中的li数量写另外一个li 10
现在有两个ul，如果第一个ul中的li数量满100个，就在在第二个ul中写入<li>001-100</li>,如果不够100，比如只有55个,就写<li>001-055<...
现在有两个ul，如果第一个ul 中的li数量满100个，
就在在第二个ul中写入<li>001-100</li>,
如果不够100，比如只有55个,就写<li>001-055</li>,
如果是220，就写入
<li>001-100</li>
<li>100-200</li>
<li>201-220</li> 展开
就在在第二个ul中写入<li>001-100</li>,
如果不够100，比如只有55个,就写<li>001-055</li>,
如果是220，就写入
<li>001-100</li>
<li>100-200</li>
<li>201-220</li> 展开
3个回答
展开全部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery-3.2.0.min.js"></script>
<style>
ul.ul2{
position: absolute;
top: 72px;
left: 150px;
}
</style>
</head>
<body>
<p>在以下输入框输入ul中的li数量</p>
<input type="number">
<button class="btn1">生成第一个ul</button>
<button class="btn2">生成第二个ul</button>
<script>
$(function(){
//第一个列表
$("button.btn1").click(function(event) {
//获取输入框的数值
var num = $("input").val();
if (num>0) {
//清除所有的列表
$("ul").remove();
//生成第一个ul
var ul = $("<ul class='ul1'>").appendTo($("body"));
for (var j = 1; j <= num; j++) {
var txt1 = $("<li>").text(j);
$(txt1).appendTo($("ul.ul1"));
}
} else{
alert("输入有误!");
}
});
$("button.btn2").click(function(event) {
var z = $("ul.ul1 li").length;
//x为百位数
var x = Math.floor(z/100);
//g为对照参数, 用于判断循环
var g = x;
//y为十位跟个位
var y = z-x*100;
if (y==0) {
//开关
var sw = 1;
}
if (z>0) {
$("ul").remove(".ul2");
var ul = $("<ul class='ul2'>").appendTo($("body"));
for (var i = 0; i <= x; i++) {
//1-100部分
if (g==0) {
var val1 = "001-";
if (z<100&&y<10) {
var val2 = "00"+y;
} else if(z<100&&y<100){
var val2 = "0"+y;
} else {
var val2 = "100";
}
var txt2 = $("<li>").text(val1+val2);
$(txt2).prependTo($("ul.ul2"));
} else if (sw!=1) {
//大于100的部分
var val1 = g*100+1+'-';
if (g==x) {
if (y<10) {
var val2 = g*100+y;
} else {
var val2 = g*100+y;
}
} else {
var val2= (g+1)*100;
}
var txt2 = $("<li>").text(val1+val2);
$(txt2).prependTo($("ul.ul2"));
g--;
} else {
g--;
sw = 0;
}
}
} else{
alert("输入有误!");
}
});
})
</script>
</body>
</html>
追问
不是点击事件，第一个ul中li是从数据库循环出来的，本来想直接直接取掉点击事件来使用，但是看你写的注释有 清除所有的列表，看得就有点晕了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<ul id="u_1"></ul>
<ul id="u_2"></ul>
<script type="text/javascript">
var len =121;//第一个ul中共有多少个li
for(var i = 0;i<121;i++){ //往第一个ul中添加li
$("#u_1").append("<li></li>");
}
var m = parseInt(len/100)+1;//计算第二个ul中需要多少个li
for(var i = 0;i<m;i++){ //往第一个ul中添加li
$("#u_2").append("<li></li>");
}
var j = 1;//用来计数用根据规律来计数具体1的显示方式，可以写个方法去转换，我就不写了。
for(var i = 0;i<m;i++){
if(i==m-1){
$("#u_2 li").eq(i).text(j+"-"+len);
}else{
$("#u_2 li").eq(i).text(j+"-"+(j+99));
j+=100;
}
}
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
$(function(){
var size = 547; //$("ul.first li").size();
var _num = 3;
var ul = $("ul.second").empty();
for(var i = 0; i < size; i++){
var _b = i + 1;
var _e = i + 100 > size ? size : i + 100;
ul.append($("<li>" + _b.getString(_num) + "-" + _e.getString(_num) + "</li>"));
i += 100 - 1;
}
});
Object.prototype.getString = function(num){
var m = "";
for(var i = 0; i < num; i++) m +="0";
var _m = m + this;
return _m.substr(_m.length - num);
}<body><ul class="second"></ul>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
