Question

我一直在这个网站上工作已经很长时间了。我的问题的基础是由我创建的jquery系统引起的，该系统在其他div之后显示div，然后根据查看器浏览器宽度更改其nth-child位置。所以我在wordpress中有一个循环，它显示了一个名为“doublearticlewrapper”的div中的帖子的所有缩略图。默认情况下，有4个div /缩略图在行中显示..总体上有64个div /缩略图（我知道很多！）。

然后使用jQuery我创建了这6个额外的div，它们本质上是广告位，这些div被称为“doublearticlewrapperadmp”。它们通过jquery和nth-child显示在主缩略图div之后。以下是此repositoning nth-child jQuery系统的jQuery代码：

$(document).ready(function(){ 
var $window = $(window);
var resized=false;
var resized500=false;
var resized600=false;
var resized700=false;
var resized800=false;

var sadfdsf=true;
var theDivs={
"div1": makeSpecialBox("doublearticlewrapperadmp", 'morecode'),

"div2": makeSpecialBox("doublearticlewrapperadmp", 'morecode'),

"div3": makeSpecialBox("doublearticlewrapperadmp", 'morecode'),

"div4": makeSpecialBox("doublearticlewrapperadmp", 'morecode'),

"div5": makeSpecialBox("doublearticlewrapperadmp", 'morecode'),

"div6": makeSpecialBox("doublearticlewrapperadmp", 'morecode'),

};

function makeSpecialBox(className, content) {
// Create a new special box with the class name and the content
var specialBox = $("<div />").addClass(className).html(content);
// Return the special box
return specialBox;
}

function removeSpecialBoxes() {
// Get the special boxes
var specialBoxes = $("#wrapper div").filter("[class^=doublearticlewrapperadmp]")
// Remove the special boxes
specialBoxes.remove();
}

function setNthPosition(theDiv,newPos){
// Generate the special box
var theClone=theDivs["div"+theDiv].clone();
// Append the special box after the nth-child
$("#wrapper div:nth-child("+newPos+")").after(theClone);
}

function checkWidth() {
var windowsize = $window.width();
if (windowsize >= 1442) {
    //if the window is in between the sizes of 440 and 500px
    //if(resized==false){
        // Remove special boxes
        removeSpecialBoxes();
        // Reposition
        setNthPosition(1,7);
        setNthPosition(2,15);
        setNthPosition(3,29);
        setNthPosition(4,37);
    setNthPosition(5,51);
    setNthPosition(6,61);
        resized=true;
  //  }
}

var windowsize = $window.width();
if (windowsize > 1022 && windowsize < 1441) {
    //if the window is in between the sizes of 500 and 600px
   // if(resized500==false){
         // Remove special boxes
        removeSpecialBoxes();
        // Reposition
       setNthPosition(1,7);
        setNthPosition(2,15);
        setNthPosition(3,29);
        setNthPosition(4,37);
    setNthPosition(5,51);
    setNthPosition(6,61);
        resized500=true;

   // }
 } 

if (windowsize > 479 && windowsize < 1023) {
    //if the window is in between the sizes of 600 and 700px
   // if(resized600==false){
        // Remove special boxes
        removeSpecialBoxes();
        // Reposition
        setNthPosition(1,7);
        setNthPosition(2,11);
        setNthPosition(3,23);
        setNthPosition(4,28);
    setNthPosition(5,39);
    setNthPosition(6,48);
        resized600=true;

    //}
}

 if (windowsize <=479) {
    //if the window is in between the sizes of 600 and 700px
   // if(resized700==false){
        // Remove special boxes
        removeSpecialBoxes();
        // Reposition
        setNthPosition(1,10);
        setNthPosition(2,20);
        setNthPosition(3,30);
        setNthPosition(4,40);
    setNthPosition(5,50);
    setNthPosition(6,60);
        resized600=true;

    //}
}

}
// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);
});

这是一个非常长的代码，但基本上，这段代码创建了6个div，名为“doublearticlewrapperadmp”，通过nth-child显示在特定位置，然后如果查看器浏览器宽度是我指定的四个宽度之一，则重新定位

所有这些代码都可以接受一个破坏性的东西... jQuery divs（doublearticlewrapperadmp）没有显示在正确的位置，直到浏览器调整像素大小或你检查谷歌浏览器中的元素。这真是一种耻辱，因为我的网站依赖于使这个jquery代码正常工作。

这是我的网站（由于PHP代码很多，我无法复制并粘贴到jsFidle中）：

http://www.motodz.com（在浏览器中调整一两个像素，或者检查chrome中的元素以查看灰色广告框的移位位置）

我的网站是一个在线的motcross新闻网站，目前处于发展阶段......根据观众的浏览器宽度，还有一些额外的间隙或空格，但我会解决这个问题。通过jquery显示的div是灰色框，表示“在这里做广告”。这些div被称为“doublearticlewrapperadmp”。尝试调整浏览器的像素大小，并观察div如何移动到正确的nth-child位置。当观众浏览器宽度变为我指定的宽度之一时，这些div应该重新定位（并重新定位），但默认情况下它们位于不正确的位置。所以......

情况：

我的循环div /缩略图后面的div通过jQuery＆amp; nth-child。
这些div会根据我的四个浏览器宽度范围重新定位或更改nth-child个位置。

问题：

在浏览器宽度调整为像素大小之前，或者您在Chrome中检查元素时，div不会显示在正确的nth-child位置。

那么我如何解决这个问题，以便默认情况下通过jQuery显示的div处于正确的nth-child位置？真正，真正地，真正地感谢任何帮助！：）

PHP循环代码：

<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>

.doublearticlewrapper code for thumbnail posts go here

<?php endwhile; ?>

///更新：///

我将相应的div更改为类而不是ID ..这有点在浏览器宽度更改时停止了闪烁问题。我还创建了一个jsFiddle来展示问题。我复制并粘贴了确切的jQuery代码并粘贴了主要的CSS代码。这是jSfiddle：

http://jsfiddle.net/Rs3wt/4/（请调整HTML窗口的大小，以便连续有4个div）

jSfiddle实际上正常工作（除了微妙的闪烁）。这就是它正常运作的原因。默认情况下..第一个广告div出现在第7篇文章div之后，第二个广告div出现在第15个文章之后，第二个出现在第29个之后，第三个之后是第37个文章之后。这些是我在jQuery代码中指定的所有正确位置。现在，如果你转到我的网站：

http://www.motodz.com

第一个广告div出现在第7个div之后（就像它应该的那样）但是第二个广告div出现在第16个div（而不是第15个）div之后，然后第三个广告div出现在第31个div（而不是第29个）之后，然后是第四个广告div在第40个（而非第37个）div之后出现。

如果您访问我的网站，请查看第一个广告div之后的任何广告div，然后调整浏览器的大小或检查Google Chrome中的元素以观察它们是否转移到正确的位置。

所以这里的问题是在我的网站上，广告div框在第7,16,31和40个div之后加载，而不是在第7个第15,29和37个div之后加载，就像我指定它们一样jQuery代码以及它们如何在jsFiddle演示中加载。

我不知道为什么他们会在Wordpress中加载到jsfiddle的不同位置，我试图剥离所有其他jquery代码，看看他们是否是另一个代码导致这个加载错误，但它没有用。也许它与循环有关，并且它创建了相同div的副本，在jsfiddle中，我手动输入所有div。我不知道，但任何帮助都会成为一个真正的人。：）

Answer 1

问题的核心原因是，当广告项添加到DOM时，:nth-child()选择器在初始加载时的行为不符合预期。它基本上忽略了它们。

如果您要计算每个广告之前有多少非广告项目，这些数字是有意义的。

为了解决这个问题，我建议您转而使用setNthPosition()方法中的:nth-of-type()选择器。

function setNthPosition(theDiv, newPos) {
    // Generate the special box
    var theClone = theDivs["div" + theDiv].clone();
    // Get the nth-child
    var nthChild = $("#wrapper > div:nth-of-type(" + newPos + ")");
    // Append the special box after the nth-child
    nthChild.after(theClone);
}

使用:nth-of-type()

jsfiddle - 新方法 使用:nth-child()

jsfiddle - 原创方法

在浏览器宽度更改之前，Div不在正确的位置

1 个答案: