Использование той же функции jQuery для управления несколькими экземплярами на одной странице

Question

У меня есть два разных div на одной странице, которые должны прокручивать контент точно так же. Мой текущий код работает достаточно хорошо, однако, вероятно, существует более оптимальный способ достижения этого. Я просто не знаю, как jQuery использовать # move-1 для # container-1 и # move-2 для # container-2 в той же функции. Может ли кто-нибудь сказать мне, как это сделать?

HTML

<div id="container-1" class="container"> 
    <div class="item item-1">container 1 - item 1</div> 
    <div class="item item-2">container 1 - item 2</div> 
    <div class="item item-3">container 1 - item 3</div> 
</div> 
    <button id="move-1">Move item in container 1</button> 
<div id="container-2" class="container"> 
    <div class="item item-1">container 2 - item 1</div> 
    <div class="item item-2">container 2 - item 2</div> 
    <div class="item item-3">container 2 - item 3</div> 
</div> 
    <button id="move-2">Move item in container 2</button> 

JQuery

$("#move-1").click(function() 
    { 
     $("#container-1 .item").animate({ "top": "-=200px" }, "slow"); 
    }); 

$("#move-2").click(function() 
    { 
     $("#container-2 .item").animate({ "top": "-=200px" }, "slow"); 
    }); 

CSS

body { 
    background: #fff; 
} 

.container { 
    position: relative; 
    background-color: #f5f5f5; 
    width: 240px; 
    height: 200px; 
    overflow: hidden; 
    font-family: arial, sans; 
    font-weight: bold; 
    text-align: center; 
} 

.item { 
    position: absolute; 
    width: 190px; 
    height: 90px; 
    color: #000; 
    overflow: auto; 
} 

.item-1 { 
    top: 0px; 
} 

.item-2 { 
    top: 200px; 
} 

.item-3 { 
    top: 400px; 
} 

button { 
    margin-bottom: 20px; 
} 

JSFIDDLE

Answer 1

Вы можете использовать идентификатор щелкнутого элемента и получить номер

$('[id^="move-"]').on('click', function() { 
    var id = this.id.split('-').pop(); 
    $('#container-' + id + ' .item').animate({ "top": "-=200px" }, "slow"); 
}); 

FIDDLE

Answer 2

Действительно просто, если ваш HTML одинаков во всем вы можете использовать prev(), чтобы получить предыдущий элемент, а затем найти детей в:

$('button').click(function() { 
    $(this).prev().find('.item').animate({ "top": "-=200px" }, "slow"); 
}); 

FIDDLE