🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

870閲覧

jQueryで複数の要素のうち、特定個所から一番距離が近いものを取得する方法

yayak

総合スコア66

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2021/01/05 09:26

編集2021/01/05 10:50

やりたいこと

以下のように、classがa,b,c,dの要素があります。
それらの要素は表示するたびにランダムな並び順になります。
そして、途中で必ず「class="check"」の「チェック」が現れます。(複数の要素→チェック→複数の要素→チェックの順で現れます)
このとき、チェックをクリックすると、「class="a"」の要素、もしくは「class="b"」の要素のどちらか一方のうち、クリックされた「チェック」から最も近いほうをclassを使用して取得したいです。

<span class="a">要素A1</span> <div class="b">要素B1</div> <p class="c">要素C1</p> <b class="d">要素D1</b> <div class="check">チェック1</div>※チェック1をクリックしたら上の要素B1を取得したいです。 <div class="b">要素B2</div> <p class="c">要素C2</p> <span class="a">要素A2</span> <b class="d">要素D2</b> <div class="check">チェック2</div>※チェック2をクリックしたら上の要素A2を取得したいです。

prevAllを使用するのかなと思たのですが、書き方がいまいちわからず、調べても上記の方法がわからずにおります。

ご存じの方がいましたら、どうかご教授いただけましたら幸いです。

何卒、よろしくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2021/01/05 09:53

チェックは一番最後で確定ですか? たとえばチェックをAとBで上下囲むとかないですね?
yayak

2021/01/05 10:00

yambejp様、自身のやりたいことをもう一度見直してみた結果、チェックがAとBで上下囲まれることがありえました。。書き方がよくなかったです。本当に申し訳ございません。説明部分を修正いたします。
guest

回答1

0

ベストアンサー

チェックが最後に出現するなら、.aか.bの最後の要素を取ればよいですね

javascript

1$(function(){ 2 var res=$('.a,.b').map(function(){ 3 return $(this); 4 }).get().pop(); 5 console.log(res); 6});

投稿2021/01/05 09:59

yambejp

総合スコア116694

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yayak

2021/01/05 10:01

ご回答を頂いたあとで本当に申し訳なさでいっぱいです。本当に申し訳ございません。 修正依頼を頂いて考え直した結果、チェックがAとBで上下囲まれることがありえました。書き方がよくなかったです、申し訳ございません。説明部分を修正いたします。
yambejp

2021/01/05 10:16

同じclassをつけたものが複数あって、チェックはクリックしたものからの距離ですね? 同じ距離にaとbがあった場合はどうするのでしょう? さらに同じ距離にaとaがあった場合どうするのでしょう? 戻す値はクラス名がいいのですか?それともHTML要素?jQuery要素?
yambejp

2021/01/05 10:58 編集

HTML要素を得たいなら $(function(){ $('.check').on('click',function(){ var prev=$(this).prevAll('.a,.b').get(0); console.log(prev); }); }); jQuery要素なら var prev=$(this).prevAll('.a,.b').eq(0); aかbかを得たいなら var prev=$(this).prevAll('.a,.b').eq(0).hasClass('a')?'a':'b'; ※ただしaとbが両方ついた要素がないものとする
yayak

2021/01/05 10:57

yambejp様、お返事有難うございます。 自身の質問力のなさを痛感しております、申し訳ございません。 > 同じclassをつけたものが複数あって、チェックはクリックしたものからの距離ですね? はい、同じclassをつけたものが複数あります。チェックをクリックしたら、そのチェックよりも上にある「class=a」の要素、もしくは「class=b」の要素で、よりクリックしたチェックに近いものを取得したいです。 > 同じ距離にaとbがあった場合はどうするのでしょう?さらに同じ距離にaとaがあった場合どうするのでしょう? 私の質問の仕方が良くありませんでした。「チェック」は確かに「class=a」の要素、もしくは「class=b」の要素に上下で挟まれることがあるのですが、取得したいのは必ず「上(prev)」からなので、同じ距離にはならないです。 > 戻す値はクラス名がいいのですか?それともHTML要素?jQuery要素? HTML要素を考えております。説明が足りず、申し訳ございませんでした。
yayak

2021/01/05 11:04

yambejp様と書き込みが同じタイミングになってしまいました。 「※ただしaとbが両方ついた要素がないものとする」という一文を読み、自身の想像力のなさを嘆いております。その通りです。自身の頭の中ではすっかりその前提で考え込んでおり、説明が不十分になってしまいました。 頂いたコードを一度試してみようと思います。 丁寧に面倒を見てくださり、ただただ感謝で頭が下がる思いです。本当に有難うございます。
yayak

2021/01/05 11:22

試した結果は、徹夜続きで脳が機能していないため明日以降のご報告になってしまいますが、必ずご報告させて頂きたく思います。
yayak

2021/01/06 07:51

yambejp様、頂いたコードでやりたかったことが実現できました! get(0)や.eq(0)などの基礎知識をもっと学ぼうと思います。 本当に有難うございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問