Question

我正在使用for循环创建div到父div。这工作正常，但我想使用数组后面的一个div。

我的代码：

    for (var i = 0; i < 3; i++) {

        var newTable = $('<div id="div' + i + '"></div').css({
            'width': tableSize.tableW + '%',
            'height': tableSize.tableH + '%',
            'background-color': 'black'
        });

        var tableProp = {
            'left': pos.posX,
            'top': pos.posY,
            'position': 'absolute',
            'display': 'none'
        };

        newTable.css(tableProp).appendTo('body').
        .delay(500, function() {});

        var availableTables = [$('#div' + [i] + '')];
    }
}

这是我试图将所有div存储在数组availableTables

中的地方

var availableTables = [$('#div' + [i] + '')];

但这些只是说它未定义。如何从此阵列中定位特定div？我可能做错了什么

我用代码制作了fiddle。

编辑：更新了小提琴链接

Answer 1

首先，在循环之外声明availableTables。然后，如果你做了像

这样的事情

availableTables.push(newTable);

它应该有用。您的代码根本不起作用，因为

[$('#div' + [i] + '')]

应该是

[$('#div' + i + '')]

这可以做一些事情，它将返回一个1元素的数组，其中该元素是你的新div - 但我不认为它是你想要的

我的建议是你应该将newTable.css（tableProp）分配给一个新变量：

let newTableFinal = newTable.css(tableProp);
newTableFinal.appendTo('body');
availableTables.push(newTableFinal);

我从你的代码中无法理解的是使用.delay（500，function（）{}）函数...它的说法＆＃34;在500ms之后，执行空函数，然后继续执行队列＆＃34; - 但.delay调用后执行quque为空，执行的函数为空...

另外，我不能确定你需要newTableFinal的分配，你也可以推进阵列＆＃34; newTable＆＃34;或＆＃34; $（＆＃39;＃div＆＃39; + i +＆＃39;＆＃39;）＆＃34;。不是＆＃34; [$（＆＃39;＃div＆＃39; + i +＆＃39;＆＃39;）]＆＃34;因为这会将一个数组推入一个数组，其中包含一个由jQuery选择器选择的项目数组......对于许多数组数组：P

编辑：快速说明......如果您计划使用＆＃34;我＆＃34;在.delay回调中，你应该记住范围如何有效...在那个延迟回调中＃＆＃34;我＆＃34;几乎总是等于退出循环时的值！你应该转向＆＃34; var i＆＃34;进入＆＃34;让我＆＃34;或使用闭包。

Answer 2

你已经为循环中的每个div提供了ID，这很好。所以现在你可以使用它的ID简单地触发任何div。

CloseSpider

您不能简单地使用 $（＆＃34;＃id1＆＃34;）。在jQuery中动态添加元素时，单击。

Answer 3

试试这个，它会工作..我所做的只是使用class而不是id，并将availableTables变量移出循环。

问题
- Id是唯一的，因此不应该将它们添加到循环中。
- 由于availableTables变量是内部循环，它每次都用最后一个div替换。

<body>
    <input type="text" value="3">
    <br>
    <button id="input">Add divs</button>
    <script>
    $("#input").click(function() {
        x = [];
        $('input[type="text"]').each(function() {
            x.push($(this).val());
        });

        makeTable();
    });
    </script>
    <script>
    function makeTable() {
        var tableSize = {
            tableW: 10,
            tableH: 12
        };
        var pos = {
            posX: 0,
            posY: 100
        };

        for (var i = 0; i < 3; i++) {

            var newTable = $('<div class="hoi"></div').css({
                'width': tableSize.tableW + '%',
                'height': tableSize.tableH + '%',
                'background-color': 'black'
            });
            var tableProp = {
                'left': pos.posX,
                'top': pos.posY,
                'position': 'absolute',
                'display': 'none'
            };

            pos.posX += 200;
            newTable.css(tableProp).appendTo('body').fadeIn(1000).delay(500, function() {});
            // $('#div' + [i] + '').css({'display': 'none'});
            // var availableTables = $('#mainDiv').children();
           
        }
         var availableTables = $('.hoi');
        console.log(availableTables);
    }
    </script>
</body>

使用for循环创建div的目标div

3 个答案: