質問: ``` あ い う え お か き く け こ さ し す★ せ そ ``` となっており、「す」が$(this)である場合、 「あ い う え お か き く け こ さ し」 もしくは 「あ い う え お か き く け こ さ し す」 を取得するにはどうすればよいでしょうか? できれば順番も「あいうえおかきくけこさし(す)」になるようにしたいのですが... ('li').index($(this))を使えばいけそうかな?と思うものの、nextUntil()などは兄弟のみですし、なかなか適切な選び方がわからず困っています。
回答: jQueryで要素を取得する場合、一度に取得できるのは、ある要素から見て、 1. 先祖(自分を含む場合あり) 2. 子孫 3. 兄弟(自分を含む場合あり) になります。 「いとこ」を取得するには、「親の兄弟の子孫」や「(共通の)先祖の子孫」といった考え方になります。 elphaさんのケースだと、以下のようになります。 1. `ul`要素の上に共通の先祖(`ul`要素をすべて囲む要素)があるか不明なので、ないものとして書きます。 2. 「『す』が$(this)である場合」といった文言があるので、実際には他の文字の場合も対応すべきなのだろう思います。そのため、例として「クリックした要素から見て、従兄(と自分)要素を取得する」こととします。 3. 最終的に取得したい要素を含んだjQueryオブジェクトを`$target`とします。 ``` $('li').on('click', function() { var $clicked = $(this); // 基準となる要素 var $brother = $clicked.prevAll() // 兄要素 var $cousin = $clicked.parent().prevAll().children(); // 親の兄要素の子要素 // 従兄と兄をひとつのjQueryオブジェクトに var $target = $cousin.add($brother); // 基準となる要素も含める場合 $target = $target.add($clicked); // 確認用にコンソールに出力 console.log($target); }); ```