Question

我们的html结果有10个div：

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

如何通过jQuery将每个启动的4个div组放入新容器中？我想得到这样的结果：

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="container">
  <div></div>
  <div></div>
</div>

请记住，有时它会是0 div，有时是3，有时是8，有时是14。谢谢你的帮助。

PS：是的，我尝试过包装，但是当我设置4时，它不能使用2或7个div。我尝试了很多ifs和sstrange解决方案......

var goals = $('.goal-slider').find('.goal');
console.log(goals.length);
goals.each(function(index){
    if(index%4 != 0 && index == goals.length) {
        goals.slice(index - index%4, index).wrap('<div class="goal-slide"></div>');
    }
    if(index%4 == 0 && index != goals.length - 1) {
        goals.slice(index - 3, index).wrap('<div class="goal-slide"></div>');
    }
});

Answer 1

你可以在每个第四个元素上循环，并用Jquery的WrapAll方法包装它们。即使您有奇数或偶数DIV，它也会起作用。

[Working example] 我在包装div中添加了一个边框，以显示每个传递中包含的内容

信用到期的信用：Stackoverflow post

    final int[] pieColors = {
            BaseActivity.getAppColor(R.color.blue),
            BaseActivity.getAppColor(R.color.SandyBrown),
            BaseActivity.getAppColor(R.color.silver),
            BaseActivity.getAppColor(R.color.FireBrick),
            BaseActivity.getAppColor(R.color.gray),
            BaseActivity.getAppColor(R.color.DarkMagenta),
            BaseActivity.getAppColor(R.color.olive),
            BaseActivity.getAppColor(R.color.MidnightBlue),
            BaseActivity.getAppColor(R.color.purple),
            BaseActivity.getAppColor(R.color.DeepSkyBlue),
            BaseActivity.getAppColor(R.color.maroon),
            BaseActivity.getAppColor(R.color.HotPink),
            BaseActivity.getAppColor(R.color.teal),
            BaseActivity.getAppColor(R.color.Purple),
            BaseActivity.getAppColor(R.color.green),
            BaseActivity.getAppColor(R.color.MediumSeaGreen)
    };

    ArrayList<Integer> colors = new ArrayList<>();
    for (int color : pieColors) {
        colors.add(color);
    }

    dataSet.setColors(colors);

    ...


public static int getAppColor(int resourceId) {
    Context context = MyApplication.getMyApplicationContext();
    int color;
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
        color = context.getResources().getColor(resourceId, context.getTheme());
    }
    else {
        //noinspection deprecation
        color = context.getResources().getColor(resourceId);
    }
    return color;
}

通过jQuery将每个4个div放入新容器中

1 个答案: