「jQuery入門」親要素と子要素を取得するサンプルコード

2017年3月14日

htmlコード
<div id="product">
<ul>
<li class=”classA″><span class=”demo1″>AA</span></li>
<li class=”classB″><span class=”demo2″>BB</span></li>
<li class=”classC″><span class=”demo3″>CC</span></li>
</ul>
</div>

jQueryコード
親要素を取得
$(“li”).click(function(){
$(this).parent()
$(this).parent(“ul”)
});

子要素を取得
$(“li”).click(function(){
$(this).children(“span”)
$(this).find(“span”)
$(“span”,this)
});

隣接要素を取得
$(“li”).click(function(){
$(this).next(“li”)
$(“+li”,this)
$(this).nextAll(“li”)
$(this).prev(“li”)
$(this).prevAll(“li”)
});