Javascript 使用jQuery在n个元素后插入div

如何在每n个

div

s之后插入

div.test

，并检查

div.test

是否已存在于所需/目标位置，以防止插入重复

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

1
2.
3.
4.
5.

使用类似于

$.inserteveryItems（'div.container'，''，3）的东西以此结束：

<div>1</div>
<div>2</div>
<div>3</div>
<div class="test"></div
<div>4</div>
<div>5</div>

1
2.
3.

如果我理解正确，这应该会有所帮助。这是一个基本的演示，让您可以单击以动态添加div

var divCounter = 1;
$(document).on('click', '.divAdder', function(){
    $('body').append('<div>' + divCounter + '</div>');
    divCounter++;
});

var divCounter=1；
$（文档）.on（'click'，'.divAdder'，function（）{
$（'body'）。追加（“”+divCounter+“”）；
divCounter++；
});

然后是一个简短的脚本，它使用第n个子伪选择器将“Test”div放置在您想要的位置。将变量“insertAfter”更改为需要在后面插入div的数字

var insertAfter = 8;
$(document).on('click', '.testAdder', function(){
    $('div:nth-child(' + (insertAfter) + 'n)').after('<div>TEST</div>');
});

var insertAfter=8；
$（文档）.on（'click'，'testAdder'，function（）{
$（'div:nth child（'+（insertAfter）+'n'））。在（'TEST'）之后；
});

希望这有帮助
 看看我在这把JS小提琴上做了什么。

这是我做的函数

function insertBetween(selector, markup, n){
    n--; // EQ counts at 0 so sub 1
    if($(selector).eq(n).after(markup)){
        return true;
    } else {
        console.error('insertBetween(): an error has occured.');
    }
}

只要不创建多个文档对象或一次性函数，向文档添加更多div应该不会有任何问题。

查找所有非蓝色
div
s。对于列表中的每三个
div
，确定其后面是否有
.blue
div
。如果没有，则插入一个

此方法不需要在每次迭代中删除元素-它只使用几个选择器和循环：

$("div:nth-child(3n)").after("<div class='blue'></div>");

// Simulate adding more red squares
$("body").append("<div /><div /><div /><div /><div /><div />");

$("div:not(.blue)").each(function (i, e) {
    if ((i + 1) % 3 == 0 && !$(e).next().is(".blue"))
        $(e).after("<div class='blue'></div>");
});

$（“div:nth child（3n）”）。在（“”）之后；
//模拟添加更多红色方块
$（“正文”）。追加（“”）；
$（“div:not（.blue）”）。每个（函数（即，e）{
如果（（i+1）%3==0&&！$（e）.next（）是（“.blue”））
$（e）.在（“”）之后；
});
这是一个函数，它将在指定的代码之后添加所需的html，还将跟踪您以前的索引调用，并且不允许您更新相同的第n个选择器

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

var addNth=（函数（）{
var len，i=0，className，prevIndexes=[]；
功能是新的（el）{
返回el.hasClass（className）；//删除了不必要的括号
}
返回函数（选择器、html、nth、类名）{
变量els=$（选择器）；
className=className | |“测试”；
if（$.inArray（n，prevIndexes）=-1）{
推送（n）；
$。每个（els，函数（索引，el）{
el=$（el）；
如果（（i%n）==0&&i！==0）{
如果（！isNew（el））{
el.before（html）；
}
}
i++；
});
i=0；
}
}
})();
addNth（'div'，'t
test
，3）；
addNth（'div'，'test
'，3）；//不会添加内容

这里拉小提琴：：
下面是一个例子，假设我想在
rl gallery item
之后附加html，这很简单

<div class="rl-gallery">
  <div class="rl-gallery-item"> </div>  
  <div class="rl-gallery-item"> </div>
  <div class="rl-gallery-item"> </div>
  <div class="rl-gallery-item"> </div>
  <div class="rl-gallery-item"> </div>
</div>



这里我给你们举两个例子

例1：

jQuery(document).ready(function(){
  $('.rl-gallery .rl-gallery-item').each(function(i) {
  if ( i === 3 ) {
   $(this).append("<p> using loop </p>");
 }
});

jQuery（文档）.ready（函数（）{
$（'.rl gallery.rl gallery item'）。每个（功能（i）{
如果（i==3）{
$（this）.append（使用循环）；
}
});

例2：

 $('.rl-gallery .rl-gallery-item').eq(6).after('<div class="scrolltowahtsctn">
  <a href="#scrollsection"> <p> לחצו לקבלת פרטים נוספים    </p> </a> </div>');
 });

$（'.rl gallery.rl gallery item'）。等式（6）。在（'
');
});
是的，这一切都不会自动完成，在添加更多项时，您必须重新运行脚本，同时考虑到它以前可能已经运行过。当然，我会重新运行脚本，但是
div:nth child（3n）
仍然不能正确地将新的
div
添加到DOM中。确实如此，假设您在将这些元素添加到dom之后运行它，那么CSS可能是一个更好的解决方案
div:nth-child（3n+2）：在{display:block；content:“test”}之后
。。。不会帮我移除这些复制品。有趣而且非常紧凑。