##要素選択方法
| 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>