【jQuery】親要素、子要素、兄弟要素の取得方法

##要素選択方法

No	文法	使い方	説明
1	parent()	$("li").parent()	親要素を探す
2	children(selector)	$("ul").children("li")	子要素を探す
3	find(selector)	$("ul").find("li")	全ての子（孫）要素を探す。　＝$("ul li")
4	siblings(selector)	$(".first").siblings("li")	自分を除く、兄弟要素を探す
5	nextAll([expr])	$(".first").nextAll()	自分より後ろの要素を探す
6	prevAll([expr])	$(".last").prevAll()	自分より前の要素を探す
7	hasClass(class)	$("div).hasClass("update_bt")	当要素は指定クラスを含めているかどうかを確認。存在しているなら、Trueを返す
8	eq(index)	$("li").eq(2)	=$("li:eq(2)")

###例1~3
demo:https://jsfiddle.net/boababy/p6n74zht/27/

<div class="grandfather">
<div class="father">
    <div class="son"> son </div>
</div>
</div>

<div class="parent">
  <p></p>
  <div>
    <p></p>
  </div>
  
</div>


<script>
    
   $(function(){

     /* 親要素を検索し、親要素に子要素を追加 */
        $(".son").parent().append("後付けの子要素だよ！")

    /* parent()は一階層上の親を探せるですが、より上の先祖要素はparents（）で検索する*/
        $(".son").parents(".grandfather").append("親の親だよ、つまり爺爺だ")

    /* 子要素を検索し、内容を追加*/
        $(".parent").children("p").text("手動追加の内容だよ")

   /*子孫要素を検索*/
        $(".parent").find("div p").html("孫だよ")

   });

</script>

###例4〜6,8
demo: https://jsfiddle.net/boababy/7Lw0chr2/26/

<ol>
  <li>お</li>
  <li>は</li>
  <li class="item">よ</li>
  <li>う</li>
  <li>〜</li>
</ol>


<ul>
  <li>こ</li>
  <li>ん</li>
  <li>に</li>
  <li>ち</li>
  <li>は</li>
</ul>

<dl>
  <li>こ</li>
  <li>ん</li>
  <li>ば</li>
  <li>ん</li>
  <li>は</li>
</dl>

<script>
$(function(){

/*兄弟要素を検索*/

$("ol .item").siblings("li").addClass("items")

$("ul li").eq(2).nextAll().addClass("nextAll")

$("dl li").eq(2).prevAll().addClass("prevAll")


}
); 

<style>
  .items{
  color:#FFFF00;
  font-weight:normal;
}

.nextAll{
  color:#FF6633;
  font-weight: bold;
}

.prevAll{
  color:#003366;
  font-weight: bolder;
}
</style>
</script>