增加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的寬度以實際寬度為參數，不計算表達式。 您必須自己這樣做。

這是一個工作示例：

 $(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>