0

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

然后使用 jQuery 创建这 6 个额外的 div，它们本质上是广告点，这些 div 被称为“doublearticlewrapperadmp”。它们通过 jquery 和nth-child. 这是这个 repositoning nth-childjQuery 系统的 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 个名为“doublearticlewrapperadmp”的 div，这些 div 显示在特定位置nth-child，然后如果查看者浏览器宽度在我的四个指定宽度之一中，则重新定位。

所有这些代码都可以接受一件破坏交易的事情......在浏览器调整像素大小或检查谷歌浏览器中的元素之前，jQuery div（doublearticlewrapperadmp）不会显示在正确的位置。这是一个真正的耻辱，因为我的网站依赖于使这个 jquery 代码正常工作。

这是我的网站（我无法将所有内容复制并粘贴到 jsFidle 中，因为有相当多的 PHP 代码）：

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

我的网站是一个在线越野摩托车新闻网站，目前处于开发阶段...根据查看者的浏览器宽度，会有一些额外的空白或空间，但我会解决这个问题。通过 jquery 显示的 div 是灰色框，上面写着“在这里做广告”。这些 div 称为“doublearticlewrapperadmp”。尝试将浏览器大小调整一个像素，并观察 div 是如何移动到正确nth-child位置的。当查看器浏览器宽度更改为我指定的宽度之一时，这些 div 应该重新定位（并重新定位），但默认情况下它们位于不正确的位置。所以...

情况：

  • 我有通过 jQuery & 放置在循环 div/缩略图之后的 div nth-child。

  • 这些 divnth-child根据我的四个浏览器宽度范围重新定位或更改位置。

问题：

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

那么我该如何解决这个问题，以便通过 jQuery 显示的 divnth-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 之后，第二个在 15 之后，第三个在 29 之后，第四个在 37 之后。这些都是我在 jQuery 代码中指定的所有正确位置。现在，如果你访问我的网站：

http://www.motodz.com

第一个广告 div 出现在第 7 个 div 之后（应该如此），但第二个广告 div 出现在第 16 个（而不是第 15 个）div 之后，然后第三个出现在第 31 个（而不是第 29 个）div 之后，然后是第四个广告 div出现在第 40 个（而不是第 37 个）div 之后。

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

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

我不知道为什么它们会像 jsfiddle 一样加载到 Wordpress 中的不同位置，我尝试剥离所有其他 jquery 代码以查看它们是否是导致加载不正确的另一个代码，但它不起作用。也许它与循环有关，它创建了相同 div 的副本，就像在 jsfiddle 中一样，我手动输入了所有 div。我不知道，但任何帮助都会真正受到赞赏。:)

4

1 回答 1

1

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

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

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

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

jsfiddle -使用新方法:nth-of-type()

jsfiddle -使用原始方法:nth-child()

于 2013-02-17T23:08:58.123 回答