jQueryのnot selectorについて

Question

jQuery初心者です。下記のコードで123をクリックして反応しないようにしたいですが、今のコードは多分一番上idは”hello1”のdivが作動します。その１２３のdiv括りから出せばいいですが、この構造変更なしでfunction変更のみで実現可能でしょうか。

<script> $(function() { $("div").not("#hello .ka").click(function() {$(this).fadeOut('slow');}); }); </script> <div id="hello"> <div id="hello1" class="ka" >123</div> <div id="hello2" class="ki">456</div> <div id="hello3" class="ki">789</div> </div>

ご教授のほどよろしくお願いします。

ご返事遅れてすみません。たくさんご回答いただき、心より感謝いたします。どの回答も実現できて、全部ベストにしたいところです。
頑張って勉強していきますので、今後も引き続きよろしくお願いします。

Answer 1

額面通りに受け取ると「#hello を含む」と受け取れますが、どちらの解釈が正しいのでしょうか。

• fadeout (#hello含む) - JSFiddle
• fadeout (#hello含まない) - JSFiddle

'use strict';
// #hello含む
jQuery(function (jQuery) {
  jQuery('#hello').on('click', function (event) {
    var target = event.target;

    if (!jQuery(target).hasClass('ka')) {
      jQuery(target).fadeOut('slow');
    }
  });
});

// #hello含まない
jQuery(function (jQuery) {
  jQuery('#hello>div:not(.ka)').on('click', function (event) {
    jQuery(this).fadeOut('slow');
  });
});

Re: JimmyKing2001 さん

Comments

[JimmyKing2001]

ご丁寧にご回答いただき、どうもありがとうございます。大変参考になって勉強になります。

[JimmyKing2001]

すみません、漏れましたが、実現したいのは含むほうでした。

[think49]

> 実現したいのは含むほうでした。
ベストアンサーに選ばれた twistist さんのコードでは「#hello を含まない」ですよ。
つまり、「#hello2 でも #hello3 でもなく、#hello な領域(#hello の padding 領域)をクリックした時」に #hello は消去されません。

[JimmyKing2001]

補足のコメントとご注意どうもありがとうございます。皆様から書いていただいたご回答を参考に、実現したい機能を実現できました。おっしゃる通り、ベスト回答は#hello含みませんでした。padding領域まで考えませんでした、大変勉強になります。

Answer 2

$("div")で返ってくるのは#hello、#hello1、#hello2、#hello3のそれぞれです。
そのそれぞれにnot("#hello .ka")を適用しても該当するものがありません。
$("div")で取得したオブジェクトのうち.kaを除外したいわけですから$("div").not(".ka")でよいです。

しかし、$("div")で取得したオブジェクトには#helloも含まれるため除外する必要があります。
前提が「div#hello直下のdivをクリック対象とする」であれば、$("#hello > div")となります。

$(function() { 
  $("#hello > div").not(".ka").click(function() {$(this).fadeOut('slow');}); 
}); 

Comments

[JimmyKing2001]

ご回答いただきどうもありがとうございます。すごくわかりやすくご丁寧に説明いただいたおかげで原理を理解できました。大変勉強になります。

Answer 3

単純に
$("div").not("#hello .ka")
この部分を
$("div").not("#hello,.ka")

じゃないですか？

Comments

[JimmyKing2001]

ご回答いただきどうもありがとうございます。ご回答は問題なく動きました。もうちょっと考えれば良かったです。

Answer 4

$(function() {
  $('div.ki').click( ... );
});
```とか
```javascript
$(function() {
  $('div:not(".ka")').click( ... );
});
```とかではだめですか。
`"#hello"` ではどの `id` にもマッチしませんので、`not("#hello .ka")` でもどれも排除されないと思います。

あとは、排除する条件が複雑ならば
```javascript
$(function() {
  $('div').click(function() {
     var $taget = $(this);
     if ($target.hasClass('ka')) return false;
     $target.fadaOut('slow');
  });
});
```のようにイベントハンドラの中で処理を分けるとか。

Comments

[unau]

↑の回答をするうえで、div#hello の存在を見落としてました。

[JimmyKing2001]

ご回答いただきどうもありがとうございます。確かに分ける方法もありますが、ご回答の２番目の方がまとまって良さそうです。大変助かります。