jquery根据一个ul中的li数量写另外一个li

发布网友发布时间：2022-04-26 00:33

共3个回答

热心网友时间：2022-04-26 02:02

<!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是从数据库循环出来的，本来想直接直接取掉点击事件来使用，但是看你写的注释有清除所有的列表，看得就有点晕了

热心网友时间：2022-04-26 03:20

<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>

热心网友时间：2022-04-26 04:55

$(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);
}