计数div id appendTo另一个鸿沟

时间:2014-02-03 20:20:10

标签: javascript appendto

我有一些在jquery拖动脚本中创建的除法。

脚本的这一部分用于div

for ( var i=0; i<52; i++ ) {
    $('<div><img src="card.png" onmouseover="this.src=&quot;images/card_' + numbers[i] + '.png&quot;" /></div>').data( 'number', numbers[i] ).attr( 'id', 'card'+numbers[i] ).appendTo( '#cardPile' ).draggable( {
      containment: '#content',
      stack: '#cardPile div',
      cursor: 'move',
      snap: 'true',
      revert: true
    } );
  }

创建的分组示例

<div class="ui-draggable" id="card7">
<img src="card.png" onmouseover="this.src=&quot;images/card_7.png&quot;">
</div>
<div class="ui-draggable" id="card18">
<img src="card.png" onmouseover="this.src=&quot;images/card_18.png&quot;">
</div>

如果我查看页面源它不显示上面的div,如果我突出显示图像并查看选择源,那么我可以看到div。

每个div都使用id卡+编号创建,该编号也与使用的图像编号相同。共有52个div,所以我要找的结果是52。

下面的这个脚本没有显示任何内容,我还测试了一个警报只是为了检查它显示为0.

<script type="text/javascript">
    var amount = $("#cardPile").children("div[id^=card]").length
    document.getElementById('total').innerHTML = amount;
</script>
<div id="total" style="color:#fff"></div>

我还试过计算div的img标签,但这也是0

<script type="text/javascript">
    alert($("#cardPile > img").length);
</script>

1 个答案:

答案 0 :(得分:0)

也许您可以在卡片中添加一个类来帮助您识别它们。尝试类似this的内容。

$(function () {
    for (var i = 0; i < 52; i++ ) {
        $('<div />', { class: 'card' }).
            appendTo( $('#cardPile') ).
            draggable({
                revert: true
            });
    }

    console.log($('#cardPile').find('.card'));
});