Question

如果尚未插入，我想在每个第5个元素后插入Ad div，使用类'art-item'。我想做下一个：

function insertAfter(newNode, referenceNode) {
   referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
function addAdvBlocks() {
    var items = document.getElementsByClassName('art-item');
    if(items.length<6){
       return;
    }
    var indx = 4;
    var slotDiv = document.createElement('div');
    slotDiv.id = '';
    slotDiv.className = 'item col-lg-4 col-md-4 col-sm-6 col-xs-12 my-ad';

    while(indx<items.length){
       if(!items[indx].nextSibling.classList.contains('my-ad')){
           insertAfter(slotDiv,items[indx]);
        }
    indx+=6;
    }
}

但它不起作用。我尝试使用Jquery来做，在这种情况下，重新执行功能块的插入顺序错误。

var adBlock = '<div class="item col-lg-4 col-md-4 col-sm-6 col-xs-12 my-ad"       style="width:300px;height: 250px"></div>';
$('.content-insertion > .art-item:nth-child(5n)').each(function (indx, elem)     {
    if (!$(elem).next().hasClass('my-ad')) {
        $(elem).after(adBlock);
    }
});

请，我需要你的帮助）

Answer 1

我的解决方案：

function addAdvBlocks() {
if ($('.item').length < 6)
    return;
var adBlock = '<div class="item col-lg-4 col-md-4 col-sm-6 col-xs-12 my-ad" style="width:300px;height: 250px"></div>';
var outerIndx = 4;
$('.art-item').each(function (indx, elem) {
    if(indx == outerIndx){
        if (!$(elem).next().hasClass('my-ad')) {
            $(elem).after(adBlock);
        }
        outerIndx+=5;
    }
});
}

现在，在每次调用此函数时，<div>块将在每个带有'.art-item'的第5个元素之后添加（如果还不存在）。 Атеперьпо-русски：функциявставляетблокпослекаждогопятогоуказанного，еслионнебылдобавлентударанее。

JS如何在每5个元素后插入div。有些课

1 个答案: