Question

如何在每n个div.test之后插入div并检查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)，但是当新的div被动态添加到网页时，它都不起作用。

@KevinB的

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

Answer 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/

Answer 2

Fiddle

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

Answer 3

看看我在这个JS小提琴上做了些什么。 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。

Answer 4

Fiddle

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

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

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

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

希望这有帮助！

Answer 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>');
 });

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

5 个答案: