跨度未附加到父级 div

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

您可能试图在 DOM 准备就绪之前对其进行查询。将所有代码包装在 jQuery 函数中以测试是否是这种情况：

$(function(){

 //your code here

});

编辑：作为对 "log is not a function" 的回应，问题指出他能够在控制台中看到输出。由此我假设 console.log 是别名：函数包装器，库助手..等等。 Post 说它有效，我运行它。

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

1) 发出警报($("selector_you_want_to_test")[0]) 这将暂停浏览器，您可以在开发人员工具 window

中检查 DOM 树结构的状态

2) 放入调试语句

3) 对于非常大的项目：获取时间线配置文件（在 google chome 中），配置文件将显示 DOM 何时完成以及您的功能何时运行。这种观点使得推理像这样的时间敏感问题变得非常容易。

祝你好运

Answer 2

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

你的代码在其他方面做了它应该做的事情，但我认为这是你真正想要它做的：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);
        }
    }
}

Answer 3

如果您看到 log() 调用（意味着您已经在其他地方定义了它），那是因为您在 HTML 之前运行 JavaScript已加载，您可以在此处看到 http://jsfiddle.net/dqrm07b2/1/

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

我知道有些人喜欢 jQuery 中的这种无提示错误功能，但我讨厌它。尝试对空集进行操作应该会引发错误，这对我来说隐藏了很多错误。

Answer 4

尝试如下代码并确保您的代码在 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/

跨度未附加到父级 div

spans not being appended to parent div

html

javascript

jquery