javascript - 使用 jQuery 在源代码中打印新行

Question

我在 jQuery 中有一个简单的函数，可以在 DOM 中创建新元素。问题出在html源代码中，它将每个元素附加在同一行中，并且阅读起来非常糟糕。

function _loadNewElements(elements){
    for(var i=0; i<elements.length; i++){
        var fixedElement = $('<img />')
        var position = elements[i].position;
        var cssMap = {
            'position': 'fixed',
            'top': position.top + "px",
            'left': position.left + "px"
        };
        fixedElement.css(cssMap);
        fixedElement.addClass("fixedTag");
        fixedElement.attr('alt', elements[i].text);
        fixedElement.attr('src', "elements/" + elements[i].id + ".png");
        fixedElement.appendTo($('#board'));
        //i'd like to print something here like ("\n");

    }
}

我尝试了 document.write("\n") 但在这种情况下它不起作用。有什么解决办法吗？

Answer 1

您可以更改此设置:

fixedElement.appendTo($('#board'));

我会在循环之外缓存板选择器，如下所示:

var board = $('#board');

然后在循环中将上面的内容替换为:

board.append(fixedElement).append('\n');

这将为您在源代码中添加一个换行符并加快循环速度，因为它不会每次都查找#board。如果您使用的是 jQuery 1.4，则可以使用 $(html, props)将其全部缩短为:

function _loadNewElements(elements){
  var board = $('#board');
  for(var i=0; i<elements.length; i++){
    $('<img />', {
        css : { 'position': 'fixed',
              'top': elements[i].position.top + "px",
              'left': elements[i].position.left + "px" },
        'class': "fixedTag",
        'alt': elements[i].text,
        'src': "elements/" + elements[i].id + ".png"
    }).appendTo(board);
    board.append('\n'); //Add new-line for your source view
  }
}