如何用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屋！