jQuery
DOMトラバース

要素の子を選択

要素の子を選択するには、 children()メソッドを使用します。

<div class="parent">
    <h2>A headline</h2>
    <p>Lorem ipsum dolor sit amet...</p>
    <p>Praesent quis dolor turpis...</p>
</div>

.parent要素のすべての子要素の色を変更します。

$('.parent').children().css("color", "green");

このメソッドは、返される要素をフィルタリングするために使用できるオプションのselector引数を受け取ります。

// Only get "p" children
$('.parent').children("p").css("color", "green");

jQuery要素のリストを反復する

jQuery要素のリストを反復処理する必要があるとき。

このDOM構造を考えてみましょう：

<div class="container">
    <div class="red one">RED 1 Info</div>
    <div class="red two">RED 2 Info</div>
    <div class="red three">RED 3 Info</div>
</div>

すべてのdiv要素に存在するテキストをredクラスで印刷するには：

$(".red").each(function(key, ele){
    var text = $(ele).text();
    console.log(text);
});

ヒント： keyは、現在親の中で反復処理中のdiv.red要素のインデックスです。 eleはHTML要素ですので、 $()やjQuery()を使って$(ele)ようにjQueryオブジェクトを作成することができます。その後、 css()やhide()などのオブジェクトのjQueryメソッドを呼び出すことができます。この例では、オブジェクトのテキストを取得します。

兄弟の選択

アイテムの兄弟を選択するには、 .siblings()メソッドを使用できます。

アイテムの兄弟を変更する典型的な例はメニューにあります：

<ul class="menu">
    <li class="selected">Home</li>
    <li>Blog</li>
    <li>About</li>
</ul>

ユーザーがメニュー項目をクリックすると、 selectedクラスがクリックされた要素に追加され、その兄弟から削除されます。

$(".menu").on("click", "li", function () {
    $(this).addClass("selected");
    $(this).siblings().removeClass("selected");
});

このメソッドはオプションのselector引数を取ります。これは、選択したい兄弟の種類を絞り込む必要がある場合に使用できます。

$(this).siblings("li").removeClass("selected");

closest（）メソッド

要素から始まり、DOMツリーをトラバースするセレクタに一致する最初の要素を返します。

HTML

<div id="abc" class="row">
    <div id="xyz" class="row">
    </div>
    <p id="origin">
      Hello
    </p>
</div>

jQuery

var target = $('#origin').closest('.row');
console.log("Closest row:", target.attr('id') );

var target2 = $('#origin').closest('p');
console.log("Closest p:", target2.attr('id') );

出力

"Closest row: abc"
"Closest p: origin"

first（）メソッド：最初のメソッドは、一致した要素のセットから最初の要素を返します。

HTML

<div class='.firstExample'>
   <p>This is first paragraph in a div.</p>
   <p>This is second paragraph in a div.</p>
   <p>This is third paragraph in a div.</p>
   <p>This is fourth paragraph in a div.</p>
   <p>This is fifth paragraph in a div.</p>
</div>

JQuery

var firstParagraph = $("div p").first();
console.log("First paragraph:", firstParagraph.text());

出力：

First paragraph: This is first paragraph in a div.

次の要素を得る

次の要素を取得するには、 .next()メソッドを使用します。

<ul>
    <li>Mark</li>
    <li class="anna">Anna</li>
    <li>Paul</li>
</ul>

"Anna"要素の上に立っていて、次の要素 "Paul"を取得したい場合は、 .next()メソッドを使用します。

// "Paul" now has green text
$(".anna").next().css("color", "green");

このメソッドはオプションのselector引数を取ります。これは、次の要素が特定の種類の要素でなければならない場合に使用できます。

// Next element is a "li", "Paul" now has green text
$(".anna").next("li").css("color", "green");

次の要素が型selectorない場合、空のセットが返され、変更は何も行いません。

// Next element is not a ".mark", nothing will be done in this case
$(".anna").next(".mark").css("color", "green");

前の要素を取得する

前の要素を取得するには、 .prev()メソッドを使用します。

<ul>
    <li>Mark</li>
    <li class="anna">Anna</li>
    <li>Paul</li>
</ul>

"Anna"要素に立っていて、前の要素 "Mark"を取得したい場合は、 .prev()メソッドを使用します。

// "Mark" now has green text
$(".anna").prev().css("color", "green");

このメソッドはオプションのselector引数を取ります。これは、前の要素が特定の種類の要素でなければならない場合に使用できます。

// Previous element is a "li", "Mark" now has green text
$(".anna").prev("li").css("color", "green");

前の要素が型selectorない場合、空のセットが返され、変更は何も行いません。

// Previous element is not a ".paul", nothing will be done in this case
$(".anna").prev(".paul").css("color", "green");

選択範囲をフィルタリングする

選択範囲をフィルタリングするには、 .filter()メソッドを使用できます。

このメソッドは選択項目で呼び出され、新しい選択項目を返します。フィルタが要素と一致する場合、それは返された選択に追加されます。そうでない場合は無視されます。要素が一致しない場合、空の選択が返されます。

HTML

これが私たちが使用するHTMLです。

<ul>
    <li class="zero">Zero</li>
    <li class="one">One</li>
    <li class="two">Two</li>
    <li class="three">Three</li>
</ul>

セレクタ

セレクタを使用したフィルタリングは、選択をフィルタリングする簡単な方法の1つです。

$("li").filter(":even").css("color", "green"); // Color even elements green
$("li").filter(".one").css("font-weight", "bold"); // Make ".one" bold

関数

セレクタを使用することができない場合は、 関数を使用して選択をフィルタリングすると便利です。

この関数は選択範囲内の各要素に対して呼び出されます。 true値を返す場合、要素は返された選択に追加されます。

var selection = $("li").filter(function (index, element) {
    // "index" is the position of the element
    // "element" is the same as "this"
    return $(this).hasClass("two");
});
selection.css("color", "green"); // ".two" will be colored green

要素

DOM要素でフィルタリングできます。 DOM要素が選択範囲内にある場合、DOM要素は返された選択に含まれます。

var three = document.getElementsByClassName("three");
$("li").filter(three).css("color", "green");

選択

他の選択項目で選択範囲をフィルタリングすることもできます。要素が両方の選択範囲にある場合、それは返された選択に含まれます。

var elems = $(".one, .three");
$("li").filter(elems).css("color", "green");

find（）メソッド

.find（）メソッドを使用すると、DOMツリー内のこれらの要素の子孫を検索し、一致する要素から新しいjQueryオブジェクトを作成できます。

HTML

     <div class="parent">
        <div class="children" name="first">
            <ul>
                <li>A1</li>
                <li>A2</li>
                <li>A3</li>
            </ul>
        </div>
        <div class="children" name="second">
            <ul>
                <li>B1</li>
                <li>B2</li>
                <li>B3</li>
            </ul>
        </div>
       </div>

jQuery

 $('.parent').find('.children[name="second"] ul li').css('font-weight','bold');

出力

• A1
• A2
• A3

• B1
• B2
• B3