如何用JQUERY给每五个元素插入元素。
本文介绍了如何用JQUERY给每五个元素插入元素。的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
不好意思,可能题目描述的有点模糊,我用代码说明一下,HTML结构如下:
<div class="box">
<div class="list">我是列表1</div>
<div class="list">我是列表2</div>
<div class="list">我是列表3</div>
<div class="list">我是列表4</div>
<div class="list">我是列表5</div>
<div class="list">我是列表6</div>
<div class="list">我是列表7</div>
<div class="list">我是列表8</div>
<div class="list">我是列表9</div>
<div class="list">我是列表10</div>
<div class="list">我是列表11</div>
<div class="list">我是列表12</div>
<div class="list">我是列表13</div>
<div class="list">我是列表14</div>
<div class="list">我是列表15</div>
</div>
想要实现每五个class="list"都被一个CLASS名为box-item的包含,代码如下:
我百度找来一段代码解决了我一开始想要实现的效果,代码如下(给有需要的人,当然解答我问题的给予的答案也可以实现):
var $li5n = $(".list").each(function(i){
$(".list").slice(i*5,i*5+5).wrapAll("<div class='box-item'></div>");//这里每五个增加一个外元素box-item
$(".list").slice(i*8,i*8+8).eq(0).addClass("list-2x1");
});//这里是除当前.list外每8个.list增加一个.list-2x1
但不是想要的最终效果。
最终效果如下:
<div class="box">
<div class="box-item">
<div class="list list-2x1">我是列表1</div>
<!--//这里占两个LIST每两个box-item占的第一个LIST多出来个list-2x1并占据两个LIST。而有list-2x1这个CLASS里只有三个class="list"其余没有list-2x1的保持五个不变。//-->
<div class="list">我是列表2</div>
<div class="list">我是列表3</div>
</div>
<div class="box-item">
<div class="list">我是列表5</div>
<div class="list">我是列表6</div>
<div class="list">我是列表7</div>
<div class="list">我是列表8</div>
<div class="list">我是列表9</div>
</div>
<div class="box-item">
<div class="list list-2x1">我是列表10</div>
<!--//这里同上,其余不变//-->
<div class="list">我是列表11</div>
<div class="list">我是列表12</div>
</div>
<div class="box-item">
<div class="list">我是列表13</div>
<div class="list">我是列表14</div>
</div>
</div>
就是这样,不知道如何实现,- -。特来寻求解决方法,先谢谢啦!~
解决方案
功能按照你要求實現的哦
$(function(){
var appendhtml = '';
$(".box").find('.list').each(function(i){
var number = i + 1;
var rmhtml = $(this).remove();
appendhtml += rmhtml.prop("outerHTML");
if(number % 5 == 0) {
$(".box").append('<div class="box-item">'+appendhtml+'</div>');
appendhtml = '';
}
})
if(appendhtml != '') {
$(".box").append('<div class="box-item">'+appendhtml+'</div>');
}
})
这是按你要求修改的代码
$(function(){
var appendhtml = '';var groupnumber = 1;var number = 1;
$(".box").find('.list').each(function() {
var groupmax = 3;
if(groupnumber % 2 == 0) {
var groupmax = 5;
}
if(groupmax == 3 && number == 1) {
$(this).addClass('list-2x1');
}
var rmhtml = $(this).remove().prop("outerHTML");
appendhtml += rmhtml;
if(number % groupmax == 0) {
$(".box").append('<div class="box-item">'+appendhtml+'</div>');
appendhtml = '';
groupnumber++;
number = 1;
}
else {
number++;
}
});
if(appendhtml != '') {
$(".box").append('<div class="box-item">'+appendhtml+'</div>');
}
})
这篇关于如何用JQUERY给每五个元素插入元素。的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文