https://qwerty.work/tags/%E3%82%BB%E3%83%AC%E3%82%AF%E3%82%BF/ Recent content in セレクタ on qwerty.work Hugo -- gohugo.io ja-JP Tue, 27 Sep 2022 09:58:37 +0900 https://qwerty.work/post/2022/09/jquery-selector-method/ Tue, 27 Sep 2022 09:58:37 +0900 https://qwerty.work/post/2022/09/jquery-selector-method/ <h2 id="メソッド一覧">メソッド一覧 </h2><p>指定した要素から親要素、子要素、兄弟要素を探したり、要素を検索したりする場合に使います。</p> <pre><code> コード 選択される要素 $('#box').parent() id=&quot;box&quot;の直接の親要素 $('#box').children() id=&quot;box&quot;直下の子要素 $('#box').find('a') id=&quot;box&quot;の子を辿って見つかったすべてのa $('#box').closest('div') id=&quot;box&quot;の親を辿って最初に見つかったdiv $('#box').next() id=&quot;box&quot;と同じ階層にある次の要素 $('#box').prev() id=&quot;box&quot;と同じ階層にある1つ前の要素 $('#box').siblings('.item') id=&quot;box&quot;と同じ階層でitemクラスを持つすべての要素 </code></pre> <h2 id="その他参考">その他参考 </h2><p>フィルタリングなど、他にももっと便利なメソッドがあり、以下のページが参考になります。</p> <div class="link-card"> <a href="https://www.jquerystudy.info/reference/traversing/index.html" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.jquerystudy.info/reference/traversing/index.html" alt="https://www.jquerystudy.info/reference/traversing/index.html" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.jquerystudy.info/reference/traversing/index.html</span> <span class="link-card-url">https://www.jquerystudy.info/reference/traversing/index.html</span> </div> </a> </div> <div class="link-card"> <a href="https://api.jquery.com/category/traversing/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://api.jquery.com/category/traversing/" alt="https://api.jquery.com/category/traversing/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://api.jquery.com/category/traversing/</span> <span class="link-card-url">https://api.jquery.com/category/traversing/</span> </div> </a> </div>