HOME > > > > >

.closest()

めちゃくちゃ便利。使用頻度高。

子要素を探す場合は.find()、親要素を探す場合はこの.closest()を使うと覚えておけば大抵の場合なんとかなるでしょうｗ

.closest( selector )

引数

(string)selector

戻り値

jQuery
jQueryオブジェクト

jQueryオブジェクトが持つ対象となるDOM要素からDOMツリーをさかのぼってselectorにマッチした最初のDOM要素をjQueryオブジェクトとして返す。 簡単に言うと対象から見てselectorにマッチする直近の親要素をかえす。

イベントターゲットから相対的に要素を特定できるので、イベント処理で大活躍。HTMLのマークアップがどうなってようが関係なく処理を実行できる。

サンプル

実行結果


自由項目です。

必須の入力項目です。

ボタンを押すとテキストを表示します

Javascript

  1. $('.jqTest1 .execute').on('click', function(e){
  2.     alert($(e.target).closest('div.alertText').find('input.targetText').val());
  3. });
  4.  
  5. $('.jqTest1 .add').on('click', function(e){
  6.     $(e.target).parent().append($('.jqTest1 .alertText:first').clone(true));
  7. });

HTML

  1. <div class="jqTest1">
  2.     <!-- 基本形 -->
  3.     <div class="alertText">
  4.         <input type="text" class="targetText" value="target" />
  5.         <button class="execute">Alert</button>
  6.     </div>
  7.  
  8.     <div class="alertText">
  9.         <input type="text" class="targetText" value="target2" /><br />
  10.         <input type="text" class="data[name]" value="偽物ターゲット" />
  11.         <button class="execute">Alert</button><button>偽物ボタン</button>
  12.     </div>
  13.  
  14.     <div class="wrap">
  15.         <div class="alertText">
  16.             <input type="text" class="targetText" value="beforeTarget" />
  17.             <div class="alertText">
  18.                 <input type="text" class="targetText" value="target3" />
  19.                 <button class="execute">Alert</button>
  20.             </div>
  21.             <button class="execute">Alert</button>
  22.         </div>
  23.     </div>
  24.  
  25.     <div class="alertText">
  26.         <div class="form">
  27.             <div class="free">
  28.                 <p>自由項目です。<input type="text" class="notTarget" value="notTarget" /></p>
  29.             </div>
  30.  
  31.             <div class="need">
  32.                 <p>必須の入力項目です。<input type="text" class="targetText" value="target" /></p>
  33.             </div>
  34.             <div>
  35.                 <p>ボタンを押すとテキストを表示します<button class="execute">Alert</button></p>
  36.             </div>
  37.         </div>
  38.     </div>
  39.  
  40.     <button class="add">追加</button>
  41. </div>

CSS

  1.  
  2. .jqTest1 .alertText {
  3.     padding: 1em;
  4.     margin: 1em;
  5.     border: 1px solid #CCCCCC;
  6. }
  7.  
  8. .jqTest1 .wrap {
  9.     background: #EEEFFF;
  10. }
  11.  

.closest( selector [, context] )

.closest( jQuery object )

.closest( element )

.closest( selectors [, context] )

参照ページ

KANTENNA.COM

Solarized

PAGE RANK

384 PV約 68 秒/1PV

[Ubuntu]動画ダウンロードと検索が簡単にできるGMediaFinder | 情報備忘録

814 PV約 68 秒/1PV

[PHP]MySQLを利用した画像の保存と出力 | WEBプログラム覚書

173 PV約 66 秒/1PV

jQuery PageSlide.js | KANTENNA.COM

630 PV約 61 秒/1PV

表示内容の切り替え(JavaScript) | WEBプログラム覚書

166 PV約 52 秒/1PV

[WordPress]投稿タイプ、タクソノミー、タームについて | WEBプログラム覚書

170 PV約 52 秒/1PV

jQuery slider | KANTENNA.COM

207 PV約 45 秒/1PV

[WordPress]XML-RPCを利用して外部から投稿したりする。 | WEBプログラム覚書

1045 PV約 37 秒/1PV

[jQuery]こんな機能があったんだ。jQuery stop() | WEBプログラム覚書

1055 PV約 35 秒/1PV

jQueryによる表示、非表示切り替え | WEBプログラム覚書

161 PV約 35 秒/1PV

[jQuery]closest()とparents() | WEBプログラム覚書

404 PV約 28 秒/1PV

[jQuery]デザイン系の人は、$(function(){})よりwindow.onloadを使ったほうがいいかも。 | WEBプログラム覚書

132 PV約 28 秒/1PV

基本的な光の作り方2 | KANTENNA.COM

584 PV約 25 秒/1PV

Dreamweaverで文字コードを変換する手順 | 情報備忘録

398 PV約 25 秒/1PV

Excel VBA の改行コード | WEBプログラム覚書

248 PV約 25 秒/1PV

javascript 子要素取得のメモ | WEBプログラム覚書

131 PV約 23 秒/1PV

コマンドプロンプト(cmd.exe)が芸術的すぎる件 | 情報備忘録

161 PV約 23 秒/1PV

渦っぽい光が美しいPhotoshop効果 | KANTENNA.COM

144 PV約 11 秒/1PV

ウェブデザイン・ホームページ制作 KANTENA.COM

394 PV約 9 秒/1PV

MySQLエラー「Column 'カラム名' in field list is ambiguous」 | WEBプログラム覚書

TIME LINE

2018 11.15

webpack、babelでreactのビルド環境構築

node.jsはインストール済でとにかくreactをJSXでかいてES5にトランスコンパイルして既存のページにscriptタグをぺちっとしたい人向け。

2018 06.05

[CakePHP3.7]LayoutでCellを使ったら memory size エラー出る場合

layoutファイルの中でcellをrender()するとViewでmemory size エラー出る場合がある。

どうやらViewでsetLayout()とか使ってると無限ループのようになってメモリエラーになるっぽい？？ 下手なlayout設定は命取りになる模様。

Other

2015 04.29

あまりにも美しい世界の駅

新旧の意匠が融合するロンドンのキングス・クロス駅、中世の大聖堂に迷い込んだような荘厳美麗なベルギーのアントワープ中央駅、砂漠に突然現れた深海のようなドバイのハーリド・イブン・アル・ワリード駅、海に囲まれた要塞のようなトルコのハイダルパシャ駅など、世界各地のあまりにも美しい34駅舎を豊富なビジュアルで紹介。

wwebdeww.com

大垣共立銀行

大垣共立銀行の個人のお客さま向けトップページ。総合口座、定期預金、外貨預金、投資信託、個人向け国債、ローン等のご案内。

椙山女学園大学

名古屋市千種区星が丘と日進市にキャンパスを持つ女子総合大学、椙山女学園大学の公式ホームページ。日本の女子大最多の7学部体制。大学概要、学部・大学院、入試情報、学生生活など、大学に関する総合情報がご覧いただけます。

名古屋ルーセントタワー

名古屋ルーセントタワーは、名古屋駅周辺のランドマークとして輝き続けるオフィスビルです。利便性と快適性はもちろんの事、「癒し」や「安らぎ」などオフィスワーカーに寄り添った価値を提供し続けます。

布袋食糧株式会社

小麦を加工して、パン・麺・お菓子等の食品を企画開発・製造・販売する布袋食糧株式会社。体にやさしくおいしい商品づくりで、皆さまに笑顔と幸せな食卓をお届けいたします。

【公式】名古屋商工会議所

名古屋商工会議所のホームページです。各種商談会、交流会など約17,000社のネットワークを活かした様々なサービスがあり、経営に関する相談、人材採用や育成、共済制度などを通じて経営者をサポートします。また、国や県・市への政策提言活動や、中小企業の海外事業展開を積極的に支援しています。

蒲郡市民病院 | 愛知県蒲郡市

患者さんに対して、最善の医療を行う。愛知県の東三河にある蒲郡市民病院は、信頼され、愛される病院を目指し、患者さんに対して最善の医療を行います。

ファーハイジャパン薬業株式会社

ファーハイジャパン薬業株式会社は海外で製造された原薬の供給事業と中国に日本の医薬品の輸出をサポートする事業を通じて人々の健康に貢献していきます。

コメ兵｜【公式】日本最大級のリユースデパートKOMEHYO

コメ兵オンラインストアは中古品、新品の通販を行う株式会社コメ兵が管理・運営するショッピングサイト。ジュエリー、時計、ブランド品、ファッション、きもの、カメラ、楽器などを豊富なアイテムを取り揃えております。