要素を選択する方法 (find) [jQuery]

find

参考：

find(expr) | jQuery 日本語リファレンス (semooh.jp)

.find() | jQuery API Documentation [Official]

直前の要素を選択する。

const $prev = $('#current').prev()Code language: JavaScript (javascript)

参考：

prev([expr]) | jQuery 日本語リファレンス (semooh.jp)

prev | jQuery リファレンス (jquerystudy.info)

.prev() | jQuery API Documentation [Official]

直後の要素を選択する。

const $next = $('#current').next()Code language: JavaScript (javascript)

参考：

next([expr]) | jQuery 日本語リファレンス (semooh.jp)

next | jQuery リファレンス (jquerystudy.info)

.next() | jQuery API Documentation [Official]

closest

最も近い親要素を選択する。

const $parent = $('#current').closest()Code language: JavaScript (javascript)

セレクタが指定された場合は、セレクタに合致する最も近い親要素を選択する。

const $list = $('#current-item').closest('ul')Code language: JavaScript (javascript)

参考：

closest([expr]) | jQuery 日本語リファレンス (semooh.jp)

parent()、parents()、closest() の違い – Qiita

.closest() | jQuery API Documentation [Official]

siblings

兄弟要素 (同じ階層の要素) を選択する。セレクタが指定された場合は、セレクタに合致する兄弟要素を選択する。

const $siblings = $('#current').siblings()Code language: JavaScript (javascript)

参考：

siblings(expr) | jQuery 日本語リファレンス (semooh.jp)

.siblings() | jQuery 1.9 日本語リファレンス (js STUDIO)

siblings | jQuery リファレンス (jquerystudy.info)

siblings( [selector] ) | jQuery API 日本語リファレンス (alphasis.info)

.siblings() | jQuery API Documentation [Official]

siblings Selector | W3Schools

children

参考：

children([expr]) | jQuery 日本語リファレンス (semooh.jp)

.children() | jQuery API Documentation [Official]

:first

最初の要素を選択する。:eq(0) もしくは :lt(1)と同じ。

:first-child との違い

:first-child：1つの親につき1つマッチするため、結果が複数の要素になる可能性がある。
:first：選択される要素は常に最大で1つ

参考：

:first Selector | jQuery API Documentation [Official]

first()

最初の要素を選択する。

const first_item = $('#items li').first()Code language: JavaScript (javascript)

参考：

.first() | jQuery API Documentation [Official]

擬似要素

参考：

Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery – Stack Overflow

JQuery select pseudo-element :after – Stack Overflow

配列を取得する

参考：

get() | jQuery 日本語リファレンス (semooh.jp)

.toArray() | jQuery API Documentation [Official]

.get() | jQuery API Documentation [Official]

単一の要素を取得する

参考：

jQuery オブジェクトと DOM エレメントの変換 | Please Sleep

get(index) | jQuery 日本語リファレンス (semooh.jp)

.get(index) | jQuery API Documentation [Official]

フィルタを拡張する

参考：

Extending jQuery’s selector capabilities | James Padolsey (archive)

正規表現で絞り込む

正規表現フィルタを追加する。

jQuery.expr[":"].regex = function (elem, index, match) {
    let matchParams = match[3].split(","),
        validLabels = /^(data|css):/,
        attr = {
            method: matchParams[0].match(validLabels)
                ? matchParams[0].split(":")[0]
                : "attr",
            property: matchParams.shift().replace(validLabels, ""),
        },
        regexFlags = "ig",
        regex = new RegExp(
            matchParams.join("").replace(/^\s+|\s+$/g, ""),
            regexFlags
        );
    return regex.test(jQuery(elem)[attr.method](attr.property));
};
Code language: JavaScript (javascript)