Question

我如何冷凝这个？还有更好的方法吗？

        // Add wrapper tags
        $(this).append('<div class="jC2_Outer">');
        $(this).append('<div class="jC2_Toolbar">');
        $(this).append('<a href="#">Copy</a>');
        $(this).append('<a href="#">Plain Text</a>');
        $(this).append('<a href="#">Link</a>');
        $(this).append('<a href="#">Help</a>');
        $(this).append('</div>');
        $(this).append('<div class="jC2_Container">rg');

此外，append函数关闭div，我应该如何将它们添加到文档中，以便它们不会关闭？在目前无效的情况下这样做：

$('.inner').append('</div></div>');

Answer 1

您可以加入数组。

var content = [
'<div class="jC2_Outer">',
    '<div class="jC2_Toolbar">',
        '<a href="#">Copy</a>',
        '<a href="#">Plain Text</a>',
        '<a href="#">Link</a>',
        '<a href="#">Help</a>',
        '<div class="jC2_Container">rg</div>',
    '</div>',
 '</div>'
];

$(this).append(content.join(''));

Answer 2

var str = '';

str += '<div class="jC2_Outer">';
str += '<div class="jC2_Toolbar">';
str += '<a href="#">Copy</a>';
str += '<a href="#">Plain Text</a>';
str += '<a href="#">Link</a>';
str += '<a href="#">Help</a>';
str += '</div>';
str += '<div class="jC2_Container">rg';

$(this).append(str);

每次执行$(this)时，您都在构建新的jQuery对象，这不是最佳对象。至少你应该缓存它：

var self = $(this);

self.append(...);
self.append(...);
self.append(...);

每当您使用append()时，所包含的HTML必须有效（全部关闭）。您无法在以后关闭另一个append()中打开的标记。否则他们将为您关闭，所以您最终得到：

$(this).append('<div class="jC2_Outer"></div>');
$(this).append('<div class="jC2_Toolbar"></div>');
$(this).append('<a href="#">Copy</a>');
$(this).append('<a href="#">Plain Text</a>');
$(this).append('<a href="#">Link</a>');
$(this).append('<a href="#">Help</a>');
//....

Answer 3

var mytext='<div class="jC2_Outer">\
        <div class="jC2_Toolbar">\
        <a href="#">Copy</a>\
        <a href="#">Plain Text</a>\
        <a href="#">Link</a>\
        <a href="#">Help</a>\
        </div>\
        <div class="jC2_Container">rg';
$(this).append(mytext);

这提供了更好的优化，因为你不是每次都创建一个新的jquery对象，而且输入的次数也少得多。

Answer 4

$(this).append(
    '<div class="jC2_Outer">'
  + '<div class="jC2_Toolbar">'
  + '<a href="#">Copy</a>'
  + '<a href="#">Plain Text</a>'
  + '<a href="#">Link</a>'
  + '<a href="#">Help</a>'
  + '</div>'
  + '<div class="jC2_Container">rg'
);

Answer 5

为什么不将整个HTML块仅附加到一个append（）调用中？

$(this).append('<div class="jC2_Outer"><div class="jC2_Toolbar"><a href="#">Copy</a><a href="#">Plain Text</a><a href="#">Link</a><a href="#">Help</a></div><div class="jC2_Container">rg</div></div>');

Answer 6

有几种方法;如果没有上下文，很难看到你想要做什么。但这里有几个选择：

链接：

$(this).append('<div class="jC2_Outer">')
       .append('<div class="jC2_Toolbar">')
       .append('<a href="#">Copy</a>')
       .append('<a href="#">Plain Text</a>')
       .append('<a href="#">Link</a>')
       .append('<a href="#">Help</a>')
       .append('<div class="jC2_Container"></div>');

级联：

$(this).append('<div class="jC2_Outer">\
                <div class="jC2_Toolbar">\
                <a href="#">Copy</a>\
                <a href="#">Plain Text</a>\
                <a href="#">Link</a>'\
                <a href="#">Help</a>\
                </div>\
                <div class="jC2_Container">');

Jquery压缩语句而不会丢失可读性

6 个答案: