JQuery прокрутки для динамических элементов

Question

у меня есть случай, когда я требуется несколько прокрутки влево/вправо события, как правило, я использую что-то вроде:

<div class="arrow_left" onclick="/* move_left() */">&lt;</div> 
<div id="some_container" class="somecontainer"> 
<div class="item_container" id="item_container"> 
<span>item 1</span> 
<span>item 2</span> 
<span>item 3</span> 
</div> 
</div> 
</div> 

и в моей JQuery:

function move_right() { 
var leftPos = $('#item_container').scrollLeft(); 
if (leftPos < 1500) { 
$('#item_container').animate({scrollLeft: leftPos + 150}); 
} 
} 

Но в этом case Я использую несколько экземпляров some_container с использованием php foreach и я не хочу определять каждый селектор в jquery вручную.

Есть ли способ решить эту проблему, не используя причудливые плагины?

благодаря Макс

Answer 1

Сделано jsFiddle для лучшего объяснения: https://jsfiddle.net/Lpcbq0ko/

<div class="group"> 
    <div class="arrow_left" onclick="/* move_left() */">&lt;</div> 
    <div class="arrow_right">&gt;</div> 
    <div id="some_container" class="somecontainer"> 
    <div class="item_container" id="item_container"> 
     <span>item 1</span> 
     <span>item 2</span> 
     <span>item 3</span> 
    </div> 
    </div> 
</div> 
<div class="group"> 
    <div class="arrow_left" onclick="/* move_left() */">&lt;</div> 
    <div class="arrow_right">&gt;</div> 
    <div id="some_container" class="somecontainer"> 
    <div class="item_container" id="item_container"> 
     <span>item 1</span> 
     <span>item 2</span> 
     <span>item 3</span> 
    </div> 
    </div> 
</div> 

$('.group .arrow_right').click(function() { 
    $(this).next('.somecontainer').html('update'); 
    $(this).next('.somecontainer').animate({scrollRight: 150}); 
}); 

Вы можете обернуть все в DIV, который будет отделять элементы управления. Затем у вас будет индивидуальный доступ для каждого контейнера. В этом примере я обновляю весь HTML, но, конечно же, вы будете делать все, что захотите.

Answer 2

$('.arrow_left').click(function() { 
    var newLeftPos = $(this).next().find('div').scrollLeft(); 
    console.log(newLeftPos); 
    if(newLeftPos >10){ 
    $(this).next().find('div').animate({scrollLeft: - 150}); 
    } 
    else{ 
     $(this).next().find('div').animate({scrollLeft: + 150}); 
    } 
}); 

и то же самое для правой стрелки :)