.children（）を動作させるのに苦労しています

Question

同じクラスのアイテムがあり、ツールチップとドロップダウンメニューを開いて選択すると、同じクラスが表示されます。それは単一の項目で動作しますが、それぞれが特定の子で動作するようにするために、私は.children（）を使用しています。それはいくつかの場所で動作するように見えるが、他の場所では動作しないようだ。私は何がうまくいかないのかを絞り込んだのですが、どうして...助けてくださいかについては全く考えていません。私はそれが問題はここにあるものは本当にだか分からないので、私はCSSを含めていない

$("div.topIconNew").click(function(){ 
//working 
$(this).parent("div.topIcon, div#topSend, div#topTool").css("background-color","#555555"); 
//working 
$(this).children("div.topTip").show(); 
//not working 
$(this).children("div.topTip").animate({width:320,marginLeft:-240},"fast"); 
//not working 
$(this).children("div.topDrop").slideDown(240); 
clicked = true; 
}); 

：

<div class="topIcon"> 

<a href="stream.html"><img src="icons/stream16lg.png" /></a> 
<div class="topIconNew"></div> 
<div class="topTip"> 
    <div class="topTipText">Stream</div> 
</div> 
<div class="topDrop">Hello</div> 

</div> 

のjQuery：HTML

。私はそれが私のjQueryだと思っていますが、私は本当にわかりません。すべての助けをいただければ幸いです。

Answer 1

あなたはJavaScriptを少し混乱しています。たとえば、div.topIconNewには子供がいないので、なぜあなたの$(this).children("div.topTip").show();がうまくいくのでしょうか？おそらく$(this).siblings("div.topTip").show();を使用したいですか？あなたのために働くだろう

HERESにはJavaScript：

$("div.topIconNew").click(function(){ 
    $(this).parent("div.topIcon, div#topSend, div#topTool") 
      .css("background-color","#555555"); 

    $(this).siblings("div.topTip") 
      .show() 
      .animate({width:320,marginLeft:-240},"fast"); 

    $(this).siblings("div.topDrop").slideDown(240); 

    clicked = true; 
}); 

Answer 2

topTipは子供やtopIconNewのいずれかの子孫ではありません。それは兄弟です。したがって、.siblings()を使用します。

$("div.topIconNew").click(function() { 
    $(this).parent("div.topIcon, div#topSend, div#topTool").css("background-color","#555555"); 
    $(this).siblings("div.topTip").show(); 
    $(this).siblings("div.topTip").animate({width:320,marginLeft:-240},"fast"); 
    $(this).siblings("div.topDrop").slideDown(240); 
    clicked = true; 
}); 

Answer 3

これらの行

<div class="topIconNew"></div> 
<div class="topTip"> 
    <div class="topTipText">Stream</div> 
</div> 
<div class="topDrop">Hello</div> 

は素晴らしいタイトル

<div class="topIconNew"> 
    <div class="topTip"> 
     <div class="topTipText">Stream</div> 
    </div> 
    <div class="topDrop">Hello</div> 
</div>