Edited at

親要素・子要素を利用する

More than 3 years have passed since last update.

以下のHTMLがあったとして。


index.html

<div id="content">

<section>
<h2>コンテンツタイトル</h2>
<div class="content-body">
<div>
<p class="1st">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, obcaecati, libero, cum provident ut sed et vero neque repellendus in impedit itaque voluptatibus ipsam enim possimus debitis harum. Quis, assumenda.</p>
<p class="2nd">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, obcaecati, libero, cum provident ut sed et vero neque repellendus in impedit itaque voluptatibus ipsam enim possimus debitis harum. Quis, assumenda.</p>
<p class="3rd">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, obcaecati, libero, cum provident ut sed et vero neque repellendus in impedit itaque voluptatibus ipsam enim possimus debitis harum. Quis, assumenda.</p>
</div>

<div>
<p class="1st">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
<p class="2nd">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
<p class="3rd">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
</div>
</div>
</section>
</div>



親要素を置き換える例


script.js

$( function () {

$(".content-body div").each( function () {
$(this).parents("#condtent").remove();
} );
} );

上記の場合、.content-body > divを基準として、親の#contentを持つ要素がまるごと削除される。


子要素を置き換える例


script.js

$( function () {

$(".content-body > div").each( function () {
$(this).find(".2nd").text("2ndが置き換わったよ!");
} );
} );

上記の場合、こうなる。

<div id="content">

<section>
<h2>コンテンツタイトル</h2>
<div class="content-body">
<div>
<p class="1st">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, obcaecati, libero, cum provident ut sed et vero neque repellendus in impedit itaque voluptatibus ipsam enim possimus debitis harum. Quis, assumenda.</p>
<p class="2nd">2ndが置き換わったよ!</p>
<p class="3rd">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, obcaecati, libero, cum provident ut sed et vero neque repellendus in impedit itaque voluptatibus ipsam enim possimus debitis harum. Quis, assumenda.</p>
</div>

<div>
<p class="1st">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
<p class="2nd">2ndが置き換わったよ!</p>
<p class="3rd"> あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
</div>
</div>
</section>
</div>


両方遣ってみる


script.js

$( function () {

$(".content-body div").each( function ( e ) {
if( e == 1 ){
$(this)
// div#content>section>div.content-body>.1st
.find(".1st").text("1行目ー")
// div#content>section>div.content-body
.parent("div")
// div#content>section>div.content-body>.2nd
.find(".2nd").text("2行目ー")
// div#content>section>div.content-body
.parent("div")
// div#content>section>div.content-body>.3rd
.find(".3rd").text("3行目ー");
}
} );
} );

結果は以下。

<div id="content">

<section>
<h2>コンテンツタイトル</h2>
<div class="content-body">
<div>
<p class="1st">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, obcaecati, libero, cum provident ut sed et vero neque repellendus in impedit itaque voluptatibus ipsam enim possimus debitis harum. Quis, assumenda.</p>
<p class="2nd">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, obcaecati, libero, cum provident ut sed et vero neque repellendus in impedit itaque voluptatibus ipsam enim possimus debitis harum. Quis, assumenda.</p>
<p class="3rd">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, obcaecati, libero, cum provident ut sed et vero neque repellendus in impedit itaque voluptatibus ipsam enim possimus debitis harum. Quis, assumenda.</p>
</div>

<div>
<p class="1st">1行目ー</p>
<p class="2nd">2行目ー</p>
<p class="3rd">3行目ー</p>
</div>
</div>
</section>
</div>