2017-11-27 10 views
-1

div内の要素を選択するのに、$(element.classname)または$(element#idname)の構文を使用してJqueryを使用しています。なぜ誰がこの場合の要素を選択できないのか分かりますか?element.classがテキストエディタのセレクタとして機能しない理由は誰でも知っていますか?

たとえば、クラス名は "foo"であり、要素はpです。 $("p.foo")は角括弧では機能しませんが、$(".foo p")が機能します。

ここに私のHTMLと私のJqueryコードです。

HTML:

<!DOCTYPE html> 
<html> 
    <head> 

     <link rel="stylesheet" type="text/css" href="styling.css"> 
    </head> 


    <body> 
     <div class="foo"> 

      <p>Do you like waffles?</p> 


     </div> 
    </body> 

    <script src="jquery-3.1.1.min.js"></script> 
    <script src="script.js"></script> 

</html> 

のjQuery:事前に

$(document).ready(function() { 
    $("p.foo").on("mouseenter", function() { 
     $(this).hide(); 
    }); 
}); 

感謝。

+6

あなたのHTMLを見ることなく、私たちはあなたを助けることができません。セレクタの違いは、あなたが思っているものとは違う形でHTMLをレンダリングすることによってのみ発生します。 –

+0

あなたのエディタはそのセレクタをサポートしていませんか? – Justinas

+0

質問にHTMLを編集していただきありがとうございます。答えは、 'foo'クラスが' p'自身ではなく 'p'の親にあるからです。 jQueryやCSSセレクタの仕組みを調べることをお勧めします。 –

答えて

3

$("p.foo")という構文を使用しているため、そのクラスの中の要素ではないfooというクラスの<p>タグを探していることが言い表されているためです。あなたの例のように、クラスfooの中の要素を対象にしようとするなら、構文$(".foo p")を使う必要があります。今度はあなたがfooクラスの中の<p>タグを探していると言っています。

したがって$(".foo p")$("div.foo p")は、fooのdivの内側にある<p>タグとまったく同じ要素をターゲットにします。

うまくいけばうまくいきます。

+0

清算スティーブありがとう!私は2つの構文の違いについて考えた後、意味をなさない:) – Lilrayazn

関連する問題