Wrap contents help

Wrap contents help

I have a content div where all my content is located. It has <p> and <ul> and images and could possibly have tables. What I would like to do is separate content out in groups and wrap them in a div with a class. So say the total number of children is 30. I would like to wrap the first 30 with a div, then the second thirty and so on. Any help appreciated.

Here is my attempt but it doesn't seem to wrap correctly.

var num = $('#content > *').not('h3:first').size();
                console.log("nodes: " + num);
               
                var div = 0;
                if(num < 20){
                      div = Math.round(num/2);
                      console.log("div: "+div);
                }else{
                    div = Math.round(num/3);
                    console.log("div: "+ div);
                }

   
                    for(i=0; i<num; i+=div){
                    var mult = i+=div;
                        if(mult >= num){
                               
                              $('#content > *').slice(i,num).wrapAll("<div class='article'></div>");
                              console.log("LAST NODES - start: " + "[" + i + "]" + "  " + "end: " +  "[" + num + "]");
                   
                              console.log($('#content > *').not('h3:first').size());
                             
                            }else{
                               
                                console.log("NODES TO WRAP - start: " + "[" + i + "]" + "  " + "end: " +  "[" + mult + "]");
                              $('#content > *').slice(i,mult).not('h3:first').wrapAll("<div class='article'></div>"); 
                              console.log($('#content > *').not('h3:first').size());
                            }
                    }