Insert a div after n number of elements using jQuery

append, insert, javascript, jquery

Solution

Here is a function that will add the desired html after the specified code and it will also track your previous index calls and not allow you to update the same nth selector

var addNth = (function () {
    var len, i = 0, className, prevIndexes = [];

    function isNew (el) {
         return el.hasClass(className); // removed unnecessary parenthesis
    }

    return function (selector, html, nth, className ) {
        var els = $( selector );
        className = className || 'test';

        if ( $.inArray(nth, prevIndexes) === -1 ) {
            prevIndexes.push(nth);

            $.each(els, function( index, el ) {
                el = $(el);
                if ( (i % nth) === 0 && i !== 0 ) {
                    if ( ! isNew(el) ) {
                        el.before( html );
                    }
                }
                i++;
            });
            i = 0;
        }
    }
})();

addNth('div','<p class="test">Test</p>',3);
addNth('div','<p class="test">Test</p>',3); // won't add content

Fiddle here :: http://jsfiddle.net/kkemple/YJ3Qn/3/

Problem

How to insert a `div.test` after every n number of `div`s and checks whether the `div.test` already exist in the desired/target position to prevent inserting a duplicate? ``` <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> ``` using something like `$.InsertEveryNItems('div.container', '<div class="added"></div>', 3);` to end up with this: ``` <div>1</div> <div>2</div> <div>3</div> <div class="test"></div <div>4</div> <div>5</div> ``` I tried `div:eq(3)` and `div:nth-child(3n)`, but neither works when new `div`s are dynamically added to the page. http://jsfiddle.net/Yg22b/7/ by @KevinB works great, but it removes the `div.test` element from DOM and re-inserts it on every dynamic addition of more `div`s. It would be nice if there is a way to avoid that?

Original source