jqueryの前のdivをクリックすると、次のdiv htmlに値を表示する方法は？

Question

私は同様のdivは、以下に示すbuttonを含む同じ構造含む多く持っている：私は二divのspanタグに値1を表示する最初のdivにbuttonをクリックすると

<div> 
    <button>Select Equipment</button> 
    <span>0</span> 
</div> 
<div> 
    <button>Select Equipment</button> 
    <span>0</span> 
</div> 
<div> 
    <button>Select Equipment</button> 
    <span>0</span> 
</div> 

を。次に、2番目のdivの選択機器をクリックすると、の値がspanタグの3番目のdivに表示されます。誰もがこれを行う方法を提案することはできますか？

Answer 1

単にボタンのインデックス+ 1のようにeqとspanを探し、spanにしたいテキストを追加するよりも、一連のボタンでクリックbuttonのindexを取得します。

* HTML *

<div> 
<button>Select Equipment 1</button> 
<span>0</span> 
</div> 

<div> 
<button>Select Equipment 2</button> 
<span>0</span> 
</div> 

<div> 
<button>Select Equipment 3</button> 
<span>0</span> 
</div> 

* CSS *

span { 
    display: visible; 
} 

* JS *

jQuery(document).ready(function(){ 

    jQuery(document).on('click.button','button',function(e){ 
    var eq = $(this).index('button'); 
    e.preventDefault(); e.stopImmediatePropagation(); 
    if($('span').eq(eq+1).length) { $('span').eq(eq+1).show().text(eq+1); } 
    }); 

}); 

Here's a fiddle

希望します。

Answer 2

使用parents親のdivを取得し、次のdivとspanを取得し、計算にparseIntを使用するnextとfindを使用します。

Working Fiddle

$(document).on('click', 'button', function() { 
    var rVal = $(this).next('span').text(); 
    $(this).parents().next().find('span').text(parseInt(rVal) + 1); 
}); 

Answer 3

HTMLコードの下に、このスクリプトを試してみてください。

あなたの更新されたコード見つけてください：

<div> 
    <button>Select Equipment</button> 
    <span>0</span> 
</div> 
<div> 
    <button>Select Equipment</button> 
    <span>0</span> 
</div> 
<div> 
    <button>Select Equipment</button> 
    <span>0</span> 
</div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script> 
$(document).ready(function() { 
    $('div button').click(function() { 
     var val = $(this).parent().index()+1; 
     $(this).parent().next('div').find('span').html(val); 
    }); 
}); 
</script> 

希望を、これはあなたに役立つかもしれません。