Question

我有一个非常简单的js问题，但似乎无法解决这个问题。为什么我的跨度没有附加到div？ jQuery加载得很好，页面不会抛出任何错误，console.log正在正确输出循环。

JS：

var matrix = [];
createGrid();
function createGrid () {

    for(var i=0; i < 6; i++) {
        matrix[i] = [];
        for(var j=0; j < 6; j++) {
            log("["+i+"]["+j+"]");
            var $span = $('<span />');
            $("#myGrid").append($span);
        }
    }
}   

function log (w) {
        console.log(w);
}

HTML：

<body>
    <div id="myGrid"></div>
</body>

来自控制台的输出：您可以看到没有附加子项......为什么会这样？

 <div id="myGrid"></div>

编辑：我确实没有提到抛出控制台错误，所以log()不是问题所在，正如我在其他地方所定义的那样。我确实在一个空集上操作，因为HTML还没有加载......我需要在准备运行时使用jquery。

Answer 1

如果您看到log()次调用（意味着您已将其定义在其他地方），那是因为您在加载HTML之前运行了JavaScript，正如您在此处看到的那样http://jsfiddle.net/dqrm07b2/1/ < / p>

基本上，$('#myGrid').append($span)上的操作没有做任何事情，因为$('#myGrid')正在返回一个空集。

我知道有些人喜欢jQuery中的这个无声错误功能，但我讨厌它。尝试在空集上操作应该抛出错误，它隐藏了很多错误。

Answer 2

您可能正在尝试在准备好之前查询DOM。将所有代码包装在jQuery函数中以测试是否是这种情况：

$(function(){

 //your code here

});

编辑：为了响应＆＃34; log不是函数＆＃34;，问题表明他能够在控制台中看到输出。从这里我假设console.log是别名的：函数包装器，库帮助器......等等。 Post说这很有效，而且我正在使用它。

将来，以下技术可能对您调试DOM问题有所帮助：

1）发出警报（$（＆＃34; selector_you_want_to_test＆＃34;）[0]）这将暂停浏览器，您可以在开发人员工具窗口中检查DOM树构造的状态

2）输入调试器声明

3）对于非常大的项目：采用时间轴配置文件（在谷歌国际机场），配置文件将显示DOM完成时间和功能运行时间。这种观点可以很容易地推断出像这样的时间敏感问题。

祝你好运

Answer 3

尝试使用以下代码，并确保您的代码在div之后或使用document.ready()：

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
        #myGrid {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: silver;
        }

        #myGrid > span {
           /* position: ;*/
            width : 20px;
            height: 20px;
            background-color: white;
        }


    </style>

</head>
<body>
 <div id="myGrid"></div>
  <script>
     var matrix = [];
            createGrid();
            function createGrid () {

                for(var i=0; i < 6; i++) {
                    matrix[i] = [];
                    for(var j=0; j < 6; j++) {
                       // console.log("["+i+"]["+j+"]");
                        var span = '<span>'+i+'</span>';
                        $("#myGrid").append(span);
                    }
                }
            }   
  </script>
</body>
</html>

结帐本次演示：http://jsbin.com/nezinixaza/1/

Answer 4

你有一个＆＃34; log＆＃34;功能或我认为你想成为的任何东西＆＃34; console.log＆＃34;

否则你的代码会做它应该做的事情，但我认为这是你真正希望它做的事情：http://jsfiddle.net/swm53ran/27/

var matrix = [];
createGrid();
function createGrid () {

    for(var i=0; i < 6; i++) {
        matrix[i] = [];
        for(var j=0; j < 6; j++) {
            console.log("["+i+"]["+j+"]");
            var $span = "<span>["+i+"]["+j+"]</span><br/>";
            $("#myGrid").append($span);
        }
    }
}

跨度未附加到父div

4 个答案: