私はかなり長い間、ワードプレスで運営されているこのウェブサイトに取り組んできました。nth-child私の問題の根本は、他の div の後に div を表示し、閲覧者のブラウザーの幅に基づいて位置を変更する、私が作成したこの jquery システムによって引き起こされます。そのため、「doublearticlewrapper」という div に投稿のすべてのサムネイルを表示するループが wordpress にあります。デフォルトでは、行に表示されている 4 つの div / サムネイルがあり、全体で 64 の div / サムネイルがあります (私が知っていることはたくさんあります!)。
次に、jQuery を使用して、本質的に広告スポットであるこれらの 6 つの追加の div を作成しています。これらの div は「doublearticlewrapperadmp」と呼ばれます。これらは、jquery および を介してメインのサムネイル div の後に表示されていますnth-child。この再配置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);
});
これは非常に長いコードですが、基本的に、このコードは「doublearticlewrapperadmp」と呼ばれる 6 つの div を作成しnth-child、ビューアーのブラウザーの幅が指定した 4 つの幅のいずれかである場合に特定の位置に表示され、再配置されます。
このコードはすべて、1 つの取り決めを破るものを受け入れます... jQuery div (doublearticlewrapperadmp) は、ブラウザーのサイズがピクセル単位で変更されるか、Google chrome で要素を検査するまで、正しい位置に表示されません。私のウェブサイトはこの jquery コードが適切に機能することに依存しているので、本当に残念です。
これが私のサイトです（PHPコードがかなりあるため、すべてをコピーしてjsFidleに貼り付けることができませんでした）：
http://www.motodz.com (ブラウザのサイズを 1 ～ 2 ピクセル変更するか、Chrome の要素を調べて、灰色の広告ボックスの位置がずれていることを確認します)
私のサイトは、現在開発段階にあるオンライン モトクロス ニュース サイトです... 閲覧者のブラウザの幅によっては、余分なギャップやスペースがいくつかありますが、これは修正します。jquery 経由で表示されている div は、「ここに広告を出す」という灰色のボックスです。これらの div は「doublearticlewrapperadmp」と呼ばれます。ブラウザーのサイズを 1 ピクセル変更してみて、div が正しいnth-child位置に移動する様子を確認してください。これらの div は、ビューアーのブラウザーの幅が指定した幅のいずれかに変更されたときに再配置 (および再配置) することになっていますが、デフォルトでは正しくない位置にあります。そう...
状況：
jQuery & を介してループ div/サムネイルの後に配置されている div があります
nth-child。これらの div
nth-childは、ブラウザの 4 つの幅の範囲に基づいて再配置または位置を変更します。
問題：
nth-childブラウザの幅がピクセルのサイズに変更されるか、Chrome で要素を検査するまで、div は正しい位置に表示されません。
では、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/ (4 つの div が連続するように HTML ウィンドウのサイズを変更してください)
jSfiddle は実際には適切に動作します (微妙なちらつき以外に)。そして、これが適切に機能する理由です。デフォルトでは..最初の ad div は 7 番目の article div の後にあり、2 番目は 15 番目の後に、3 番目は 29 番目の後に、4 番目は 37 番目の後にあります。これらはすべて、jQuery コードで指定した正しい位置です。今、あなたが私のウェブサイトにアクセスした場合：
最初の ad div は 7 番目の div の後に来ますが (そうあるべきです)、2 番目の ad div は 16 番目 (15 番目ではなく) div の後に来ます。次に 3 番目は 31 番目 (29 番目ではなく) div の後に来ます。 (37 番目ではなく) 40 番目の div の後に来ます。
私のウェブサイトにアクセスした場合は、最初の広告 div の後の広告 div を見て、ブラウザのサイズを変更するか、Google Chrome で要素を調べて、それらが正しい位置に移動するのを確認してください。
したがって、ここでの問題は、私の Web サイトでは、ad div ボックスが、jQuery コードで指定したように、7 番目、15 番目、29 番目、および 37 番目の div の後にロードするのではなく、7 番目、16 番目、31 番目、および 40 番目の div の後にロードされることです。 jsFiddle デモでロードする方法。
jsfiddle のように、Wordpress のさまざまな場所に読み込まれる理由がわかりません。他のすべての jquery コードを削除して、これが別のコードで誤って読み込まれるかどうかを確認しようとしましたが、機能しませんでした。多分それはループと関係があり、同じdivのコピーを作成します.jsfiddleのように、すべてのdivに手動で入力しました. わかりませんが、どんな助けも本当に感謝しています。:)