要素トラバーサルを実装するメソッド: 1. Children()、選択した要素のすべての直接の子要素を返すことができます; 2. Closest()、これは選択した要素の最初の祖先要素を返すことができます; 3. each()、一致する要素ごとに関数を実行します; 4. filter()、指定された要素をフィルタリングできます; 5. nextAll() など。
![jqueryで要素トラバーサルを実装する方法](https://img.php.cn/upload/article/000/000/024/62946ac0f2383326.jpg)
このチュートリアルの動作環境: Windows7 システム、jquery1.10.2 バージョン、Dell G3 コンピューター。
jquery は要素を走査するためのさまざまなメソッドを提供します
##メソッド | 説明 |
add() | 一致する要素のセットに要素を追加します |
addBack() | 前の要素セットを追加します現在のコレクションへ |
children() | 選択した要素のすべての直接の子要素を返します |
closest() | 選択した要素の最初の祖先要素を返します |
contents() | 選択した要素のすべての直接の子要素を返します (テキストとコメント ノードを含む) ) |
#each()
一致する要素ごとに関数を実行します |
| #end()
現在のチェーン内の最新のフィルタリング操作を終了し、一致する要素のセットを前の状態に戻します |
| eq()
選択された要素を含む要素を返します。指定されたインデックス番号 |
#filter() |
一致する要素のセットを、セレクターまたは一致する関数の戻り値に一致する新しい要素に削減します
|
find() |
選択した要素の子孫要素を返します
|
first() |
選択した要素の最初の要素を返します選択した要素 elements
|
has() |
内部に 1 つ以上の要素を持つすべての要素を返します
|
is( ) |
selector/element/jQuery オブジェクトに基づいて一致する要素のセットを確認し、一致する要素が少なくとも 1 つある場合は true を返します
|
last() |
選択した要素の最後の要素を返します
|
map() |
現在の一致セットの各要素を関数に渡し、次の内容を含む新しい jQuery を生成します。戻り値 Object
|
next() |
選択した要素の次の兄弟要素を返します
|
nextAll() |
選択した要素の後のすべての兄弟要素を返します
|
nextUntil() |
指定された 2 つのパラメータ間の各要素の後の兄弟要素を返しますすべての兄弟要素
| #not() | 一致する要素のセットから要素を削除します
##offsetParent() |
Returns最初に配置された親要素 |
parent() |
選択した要素の直接の親要素を返します |
parents() |
選択した要素のすべての祖先要素を返します |
parentsUntil() |
指定された 2 つのパラメータの間を返します | ## の間のすべての祖先要素
#prev() | 選択した要素の前の兄弟要素を返します |
prevAll( ) | すべての兄弟要素を返します選択した要素の前 |
prevUntil() | 指定された 2 つのパラメータ間のすべての要素を返します選択した要素の前のすべての兄弟要素 |
siblings() | 選択した要素のすべての兄弟要素を返します |
slice() | 一致する要素のセットをサブセットに縮小します指定された範囲 |
#子要素を走査するには 2 つのメソッドがあります:
-
children() メソッド: 要素
# の下にある直接のサブセット要素を取得します。
- ##find() メソッド: この要素の下にあるすべてのサブセット要素 (サブセットのサブセットを含む) を取得します。
##違い:
children()メソッドは、選択した要素のすべての直接の子要素を返します (直接の子要素、孫ではなく息子のみを検索します (つまり、再帰的に走査しません)
find( ) メソッドで取得します現在の要素コレクション内の各要素の子孫 (find() メソッドはパラメータを渡す必要があり、渡さないと無効になることに注意してください)
例: すべての子要素をクエリする
div (父节点)
ul (指定元素)
- li (子节点1)
span (孙节点1)
- li (子节点2)
span (孙节点2)
- li (子节点3)
span (孙节点3)
ログイン後にコピー
![1649995463633782.gif jqueryで要素トラバーサルを実装する方法](https://img.php.cn/upload/image/495/684/987/1649995463633782.gif)
兄弟要素を走査するには 7 つのメソッドがあります:
next() メソッド![164731961080488jqueryで要素トラバーサルを実装する方法 jqueryで要素トラバーサルを実装する方法](https://img.php.cn/upload/image/345/769/969/164731961080488jqueryで要素トラバーサルを実装する方法)
- list item 1
- list item 2
- list item 3
- list item 4
- list item 5
ログイン後にコピー
#nextAll() メソッド
- list item 1
- list item 2
- list item 3
- list item 4
- list item 5
ログイン後にコピー
![164731970364391jqueryで要素トラバーサルを実装する方法 jqueryで要素トラバーサルを実装する方法](https://img.php.cn/upload/image/121/683/392/164731970364391jqueryで要素トラバーサルを実装する方法)
#nextUntil() メソッド
ul (父节点)
- li (兄弟节点)
- li (兄弟节点)
- li (类名为"start"的兄弟节点)
- li (类名为"start"的li节点的下一个兄弟节点)
- li (类名为"start"的li节点的下一个兄弟节点)
- li (类名为"start"的li节点的下一个兄弟节点)
- li (类名为"stop"的兄弟节点)
在这个例子中,我们返回在类名为“star”和类名为“stop”的 li元素之间的所有下一个兄弟元素。
ログイン後にコピー
![164731974561497jqueryで要素トラバーサルを実装する方法 jqueryで要素トラバーサルを実装する方法](https://img.php.cn/upload/image/427/559/890/164731974561497jqueryで要素トラバーサルを実装する方法)
prev() メソッド
ul (父节点)
- li (兄弟节点)
- li (类名为"start"的li节点的上一个兄弟节点)
- li (类名为"start"的li节点)
- li (兄弟节点)
- li (兄弟节点)
ログイン後にコピー
![1647319818612518.png jqueryで要素トラバーサルを実装する方法](https://img.php.cn/upload/image/218/531/946/1647319818612518.png)
prevAll() メソッド
ul (parent)
- li (类名为"start"的li的上一个兄弟节点)
- li (类名为"start"的li的上一个兄弟节点)
- li (类名为"start"的li的上一个兄弟节点)
- li (类名为"start"的li节点)
- li (兄弟节点)
- li (兄弟节点)
在这个例子中,我们返回类名称为“star”的li元素之前的所有兄弟元素。
ログイン後にコピー
![1647319869452040.png jqueryで要素トラバーサルを実装する方法](https://img.php.cn/upload/image/911/602/866/1647319869452040.png)
prevUntil() メソッド
ul (父节点)
- li (类名为"stop"的兄弟节点)
- li (类名为"start"的li节点的上一个兄弟节点)
- li (类名为"start"的li节点的上一个兄弟节点)
- li (类名为"start"的li节点的上一个兄弟节点)
- li (类名为"start"的li节点)
- li (兄弟节点)
- li (兄弟节点)
在这个例子中,我们返回在类名为“star”和“stop”的li元素之间的所有上一个兄弟元素,。
ログイン後にコピー
![164731996572344jqueryで要素トラバーサルを実装する方法 jqueryで要素トラバーサルを実装する方法](https://img.php.cn/upload/image/235/109/785/164731996572344jquery%E3%81%A7%E8%A6%81%E7%B4%A0%E3%83%88%E3%83%A9%E3%83%90%E3%83%BC%E3%82%B5%E3%83%AB%E3%82%92%E5%AE%9F%E8%A3%85%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95)
[推奨学習:
jQuery ビデオ チュートリアル、
webフロントエンドビデオ
]
以上がjqueryで要素トラバーサルを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。