以下のように記述すると、
$("ul li").each(function(i){
console.log(i);
});
<ul>
<li></li>
<li></li>
</ul
とあるhtmlでliが2つ取得できますが、
$("ul li a").click(function(){
$(this).parent().each(function(i){
console.log(i);
});
});
とするとliが1つしか取得できません。
後者ですとなぜ1つしかしゅとくできないのでしょうか。
<ul> <li><a href="...">いちばんめ</a></li> <li><a href="...">にばんめ</a></li> <!-- ★ --> </ul>
となってるところで、以下のようになってた場合。
$("ul li a").click(function(){ $(this).parent().each(function(i){ console.log(i); }); });
もし、「にばんめ」がクリックされたとしたら、
$(this).parent().each(function(i){
の
this | クリックした「にばんめ」とある A タグの要素 |
$(this) | ↑の jQuery オブジェクト |
$(this).parent() | ↑の親である LI タグの要素(★をつけたとこの LI )の jQuery オブジェクト |
となり、一回だけです。
$(this).parent().parent().children().each(function(i){
こうなってると、どうでしょうね。
this | クリックした「にばんめ」とある A タグの要素 |
$(this) | ↑の jQuery オブジェクト |
$(this).parent() | ↑の親である LI タグの要素(★をつけたとこの LI )の jQuery オブジェクト |
$(this).parent().parent() | ↑の親である UL タグの要素の jQuery オブジェクト |
$(this).parent().parent().children() | ↑の子である LI タグの要素 全ての jQuery オブジェクト |
となって、二回取得できます。
なるほど。。勉強になりました!ありがとうございます!
2014/03/30 16:47:52