jQueryでセレクタを取得する際の疑問点です。

Question

jQueryを勉強していて、

要素を取得するコードで

$('.menubtn > a')

こういったものが出てきました。

「>」は親子関係を意味する、と調べたら出てきました。

しかし普通に、

$('.menubtn a')

ではダメなんでしょうか？

初歩的な質問だとは思いますが、回答よろしくお願い致します。

Answer 1

.menu > a
これは、menu クラスのタグの直子

.menu a
これは、menu クラスタグの配下の子すべての アンカータグ

menu

a

submenu

 a

のとき、menu > a は、1を、menu a は2を得られる。

Comments

[ShunYoshizawa]

回答ありがとうございました！

理解することができました！

Answer 2

$('.menubtn > a')

親子関係のaだけを返す。

$('.menubtn a')

.menubtn内の何階層に関係なくすべてを返す。

<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
	$ele1 = $('#div1 > a'); // 要素1個取得
	
	$ele2 = $('#div3  a');  // 要素2個取得
	    	
 });
</script>

<div id="div1"> 
	<a href="">A</a>
	<div id="div2"> 
 		<a href="">A</a>
	</div>
</div>

<div id="div3"> 
	<a href="">A</a>
	<div id="div4"> 
 		<a href="">A</a>
	</div>
</div>

Comments

[ShunYoshizawa]

回答ありがとうございます。

すごくよく違いが分かりました。