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

发布于 2024-08-30 12:31:22 字数 809 浏览 0 评论 0原文

我在 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") 但在这种情况下它不起作用。有什么解决办法吗？

原文

I have a simple function in jQuery that creates new elements in the DOM. the problem is in the html source code, it append every element in the same line, and it's very bad to read.

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");

    }
}

I tried document.write("\n") but in this context it doesn't work.
Any solution?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

心房敞 2024-09-06 12:31:22

您可以更改此设置：

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

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

var board = $('#board');

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

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

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

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
  }
}

You can change this:

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

I would cache the board selector outside your loop, like this:

var board = $('#board');

Then in your loop, replace the above with:

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

This will give you a new-line in the source and speed up your loop, since it's not looking for #board every time. If you're using jQuery 1.4, you can use $(html, props) to shorten it all down to this:

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
  }
}

回复收藏 0 原文