使用jQuery在n个元素后插入一个div答案

【问题标题】：Insert a div after n number of elements using jQuery使用jQuery在n个元素后插入一个div
【发布时间】：2013-12-27 00:52:59
【问题描述】：

如何在每 n 个 divs 之后插入一个 div.test 并检查 div.test 是否已存在于所需/目标位置以防止插入重复？

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

使用$.InsertEveryNItems('div.container', '<div class="added"></div>', 3); 之类的东西来结束：

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

我尝试了div:eq(3) 和div:nth-child(3n)，但是当新的divs 被动态添加到页面时都不起作用。

@KevinB 的http://jsfiddle.net/Yg22b/7/ 效果很好，但它会从 DOM 中删除 div.test 元素，并在每次动态添加更多 divs 时重新插入它。如果有办法避免这种情况就好了？

【问题讨论】：

对，这些都不会自动执行，您必须在添加更多项目时重新运行脚本，同时考虑到它之前可能已经运行过。
当然，我会重新运行脚本，但 div:nth-child(3n) 仍然不能正确定位到添加到 DOM 的新 divs。
当然可以，假设您在将这些元素添加到 dom 之后运行它。
CSS 可能对您来说是一个更好的解决方案。 div:nth-child(3n+2):after { display: block; content: "test" }
所以，更像这样：jsfiddle.net/Yg22b/7

标签： javascript jquery insert append

【解决方案1】：

这是一个函数，它将在指定代码之后添加所需的 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

在这里拉小提琴 :: http://jsfiddle.net/kkemple/YJ3Qn/3/

【讨论】：

【解决方案2】：

Fiddle

找到所有非蓝色的divs。对于列表中的每三个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>");
});

【讨论】：

【解决方案3】：

看看我在这个 JS fiddle 上做了什么。 http://jsfiddle.net/TWLAX/

这是我做的函数。

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 应该没有任何问题。

【讨论】：

嗯...不会为我删除骗局。不过，有趣且非常紧凑。

【解决方案4】：

Fiddle

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

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

后面是一个简短的脚本，它使用 nth-child 伪选择器将“测试”div 放置在您想要的位置。将变量“insertAfter”更改为您需要在之后插入 div 的数字。

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

希望这会有所帮助！

【讨论】：

【解决方案5】：

下面是示例，假设我想在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>");
 }
});

示例 2：

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

【讨论】：