TOP / JS / 基本 / 【jQuery】要素を取得するチートシート

【jQuery】要素を取得するチートシート

親子関係から要素を取得する

parents：祖先要素を取得

$("p").click(function () {
        $(this).parents(".cate").addClass('open');
});

parent：親要素を取得

$("p").click(function () {
        $(this).parent(".cate").addClass('open');
});

children：子要素を取得

$("p").click(function () {
        $(this).children(".cate").addClass('open');
});

find：子孫要素を取得

$("p").click(function () {
        $(this).find(".cate").addClass('open');
});

兄弟関係から要素を取得する

next：次の要素を取得

$("p").click(function () {
        $(this).next(".cate").addClass('open');
});

続けて書くと次の次の要素、のように先の要素を指定できます

$("p").click(function () {
        $(this).next().next(".cate").addClass('open');
});

nextAll：以降の要素を取得

同階層（兄弟要素）内で取得します

$("p").click(function () {
        $(this).nextAll(".cate").addClass('open');
});

nextUntil：以降の要素の範囲を指定

同階層（兄弟要素）内で、要素以降〜指定した要素までを取得します。

$("p").click(function () {
        $(this).nextUntil(".cate").addClass('open');
});

これだと、クリックしたpタグからcateクラスがついた要素まで。

prev：前の要素を取得

prevAll：以前の要素を取得

siblings：同階層内の要素を取得

JS 基本

参考

関連記事