javascript - 在 Bootstrap 中模态宽度始终为 0

Question

这是jqgrid中加载完成的函数。

我有一个通过单击按钮打开的 Bootstrap 模式。在该模式中我有一个 jqgrid。当我在加载完成中调用函数时，在该函数中，附加跨度的宽度始终为0。您可以看到下面的函数:

function columnresize(id) { 

    $(this).parent().append('<span id="widthTest" />');

    gridName = this.id;

    $('#gbox_' + gridName + ' .ui-jqgrid-htable' + gridName).css('width', 'inherit');
    $('#' + gridName).parent().css('width', 'inherit');

    var columnNames = $("#" + gridName).jqGrid('getGridParam', 'colModel');
    var thisWidth;
    var itmCount = columnNames.length;
    /*var grid = $('#' + gridName);
    var iids = grid.getDataIDs();*/
    // Loop through Cols
    for (var itm = 0; itm < itmCount; itm++) {

    var curObj = $('[aria-describedby=' + gridName + '_' + columnNames[itm].name + ']');

    var thisCell = $('#' + gridName + '_' + columnNames[itm].name + ' div');
    $('#widthTest').html(thisCell.text()).css({
    'font-family': thisCell.css('font-family'),
    'font-size': thisCell.css('font-size'),
    'width': thisCell.css('width'),
    'font-weight': thisCell.css('font-weight')
    });


    var maxWidth = Width = $('#widthTest').width() + 17;
    //var maxWidth = 0;
    var itm2Count = curObj.length;
            // Loop through Rows
            for (var itm2 = 0; itm2 < itm2Count; itm2++) {

            var thisCell = $(curObj[itm2]);

            $('#widthTest').html(thisCell.html()).css({
            'font-family': thisCell.css('font-family'),
            'font-size': thisCell.css('font-size'),
            'font-weight': thisCell.css('font-weight')
            });

            thisWidth = $('#widthTest').width();
            if (thisWidth > maxWidth) {maxWidth = thisWidth+10;}
            }

    $('#' + gridName + ' .jqgfirstrow td:eq(' + itm + '), #' + gridName + '_' + columnNames[itm].name).width(maxWidth).css('min-width', maxWidth+17);
    $('#' + gridName + ' .jqgfirstrow td:eq(' + 0 + '), #' + gridName + '_' + columnNames[0].name).width('30').css('min-width', '30px');
    //grid.setRowData ( iids[itm], false, {height: 30} );

    }
    $('#widthTest').remove();
}

我在 jqgrid 的加载完成中调用上述函数，如下所示:

loadComplete: function() {
columnresize.call(this, 'Table');
}

行中的宽度$('#widthTest').width():

var maxWidth = Width = $('#widthTest').width() + 17;

始终为 0!

有什么想法吗？

Answer 1

经过大量研究，我发现因为它是一个隐藏的dom元素，所以我必须使用this

jquery获取隐藏dom元素的实际大小。

感谢@Justinas。