jqueryボタンで下にスクロールアップ

Question

私はボタンで上下にスクロールしようとしています。私はたくさんのコードを書いたが、すべて動作しなかった。 私はコードで説明します。

<div class="component"> 
    <div class="go_up"></div> 
    <div class="go_down"></div> 
    <div id="content1" class="componentin"> 
    <div id="item"></div> 
    </div> 
</div> 

これは私のhtmlコードです。私はpxで項目をスクロールしたい。また、このHTMLコードをページ内で複数回使用することで、コードをより具体的にする必要があります。ボタンdivの後にitemという名前のクラスの最初の要素をアニメーション化しようとしました。そして、これは私のjqueryのコードである（動作しない）

$(".go_up").click(function(){ 
    var this1 = $(this); 
    var content = $(this1 + '+ .componentin'); 
    var $component = $(content + ':first-child'); 
    $component.animate({"marginTop": "-=50px"}, "slow"); 
}); 
$(".go_down").bind('click',function(){ 
    var this1 = $(this); 
    var content = $(this1 + '+ .componentin'); 
    var $component = $(content + ':first-child'); 
    $component.animate({"marginTop": "+=50px"}, "slow"); 
}); 

あなたのセレクタ式が間違っているヘルプ

Answer 1

に感謝。コード$('element1 + element2')は、直ちに兄弟を選択するだけです。

//works 
$('element1 + element2') 
<element1 /> 
<element2 /> 

//but doesn't work here 
$('element1 + element2') 
<element1 /> 
<something /> 
<element2 /> 

代わりに、兄弟セレクタを使用してください。

http://jsfiddle.net/F7UqC/

$(".go_up").click(function(){ 
    $(this) 
     .siblings('.componentin') 
     .children('#item') 
     .animate({"marginTop": "-=50px"}, "slow"); 
}); 
$(".go_down").bind('click',function(){ 
    $(this) 
     .siblings('.componentin') 
     .children('#item') 
     .animate({"marginTop": "+=50px"}, "slow"); 
});