Увеличение ширины div не работает должным образом

Question

То, что я хотел бы достичь, - это прокрутка до конца строки (стрелка вправо), после чего на последнем элементе будет выделена опция div. Раньше я добавлял несколько фиктивных ячеек, и это сработало. Но теперь я решил просто увеличить ширину строки div на какую-то сумму.

if(!rows[currentRowIndex].reachedEnd) 
{ 
    console.log("increasing "); 
    $("#row" + currentRowIndex).width("+=210"); 
    rows[currentRowIndex].reachedEnd = true; 
} 

Это не работает по какой-либо причине. Я даже пытался увеличиться на какое-то большее число, но он перескакивает в какое-то неожиданное место, что означает, что я плохо понимаю, что происходит с div после изменения ширины.

Рабочая копия (размер окна, чтобы показать 2 ячейки в клиентской области) https://jsfiddle.net/souren/98rddfzp/3/

UPD1:

Я даже пробовал:

$("#row" + currentRowIndex).width($("#row" + currentRowIndex).width() + 210); 

с таким же результатом.

Answer 1

jQuery's width принимает фактическую ширину как параметр и не оценивает выражения. Вы должны сделать это сами.

Вот рабочий пример:

$(function() { 
 
    var $div = $('#myDiv') 
 
    $('#increase').on('click', function() { 
 
    $div.width($div.width() + 250) 
 
    }) 
 
})

#myDiv { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="myDiv"></div> 
 
<button id="increase">Increase</div>

Answer 2

Попробуйте последовать этому примеру, это решит вашу проблему ::

HTML

<div class="testDiv" style="background-color: grey; width: 100px;">Rana</div> 

JQuery

<script type="text/javascript"> 
$(document).ready(function() { 
    $('button').on('click', function(){ 
     $(".testDiv").width($(".testDiv").width() + 210); 
    }); 
}); 
</script>