指定した位置にランダムで抽選したボックスを表示したい

<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<body>
	
	
	
<div class="wapper">
<?php
	
$ad01 = '<div class="single-topbox">
		<dl>
			<dt>イメージ画像A</dt>
			<dd>
				<h2>AAAAA</h2>
				<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
			</dd>
		</dl>
</div>';
$ad02 = '<div class="single-topbox">
		<dl>
			<dt>イメージ画像B</dt>
			<dd>
				<h2>BBBBB</h2>
				<p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
			</dd>
		</dl>
</div>';
	
$rand_ad = array($ad01, $ad02 );
$ad_disp = array_rand($rand_ad);
echo $rand_ad[$ad_disp];
?>
	<p>あいうえお</p>
	<p>かきくけこ</p>
<script>
$('.wapper p:first-of-type').addClass('first-p');
$(".wapper").each(function(){
    $(this).find(".first-p").after($(this).find(".single-topbox"));
})
</script>
</div>
</body>
</html>

最初の<p>にclassをつける処理を行い、その下に<div>を移動し、その<div>の中身をランダムで表示させたいのですが、
現在、ボックスの中のddに同じボックスが生成されてしまってます（原因も良く分からずです･･･）。

あいうえお
ボックス（phpでランダム）
かきくけこ

と表示したいのですが、
現在下記のようになってしまいます。

あいうえお
ボックス
ボックス
かきくけこ

ご教授頂けると助かります。

行動規範の内容に同意します

回答1件

ベストアンサー

ブラウザの開発者ツールで確認していただくとわかると思いますが、PHP側で生成したHTML要素の中のPタグにもfirst-pクラスが追加されています。
first-pクラスのついている要素にPHPで生成したHTML要素を挿入しているため、２つ同じ要素が表示されています。

これは、

$('.wapper p:first-of-type').addClass('first-p');

の部分のセレクターの指定が**「wapperクラスを持つ要素配下の全ての子孫要素の中でfirst-of-typeというクラスを保持するPタグ」となっているためです。
このセレクターの指定を「wapperクラスを持つ全ての要素の子要素の中でfirst-of-typeというクラスを保持するPタグ」**に変えることで期待する動作となると思います。る動作となると思います。

投稿2018/10/15 04:27