Question

我创建了2个div，Div1（冻结）Div2（父级），再次将3个div（加载，标题，msg）附加到Div2（父级）。整个div到body标签。以下是我的代码，我认为还有其他一些最好的方法来实现这一目标。

    var freeze = $('<div/>',{
        "class" : "freeze"
    });
    var parent = $('<div/>',{
        "class":"parent"
    });

    var loading = $('<div/>',{
        "class":"loadimg"
    }).appendTo(parent);

    var header = $('<div/>',{
        "class":"header"
    }).appendTo(parent);
    var msg = $('<div/>',{
        "class":"msg"
    }).appendTo(parent);

    $('body').append(freeze,parent);

Answer 1

在大多数情况下使用jQuery是完全矫枉过正的，只会使代码超出必要的时间。由于您拥有的所有内容都是常量，因此您只需创建一个HTML字符串并将其附加到正文中即可。

如果你想要jQuery引用它的一部分以供以后使用，那么只需稍后使用.find（）来查找它们。

例如，你可以这样做：

var html = '<div class="freeze"></div>' + 
           '<div class="parent">' + 
               '<div class="loadimg"></div>' +
               '<div class="header"></div>' +
               '<div class="msg"></div>' +
           '</div>';
$(document.body).append(html);

对于以后的参考，你可以这样做：

var header = $(document.body).find(".header");

Answer 2

由于问题是关于使用jQuery在同时创建和追加多个对象，所以这是一种方法：

$('body').append([
    $('<div/>',{ "class": "freeze" }),
    $('<div/>',{ "class": "parent" }).append([
        $('<div/>',{ "class": "loadimg" }),
        $('<div/>',{ "class": "header" }),
        $('<div/>',{ "class": "msg" })
    ]);
]);

在某些情况下，使用结构数据进行操作比原始标记更可靠，更方便

Answer 3

jQuery方法通常实现装饰器模式，这意味着您可以嵌套调用：

Serial::Serial(
  std::string &commPortName,
  int bitRate,
  bool testOnStartup,
  bool cycleDtrOnStartup
) {
  std::wstring com_name_ws = s2ws(commPortName);

  commHandle =
    CreateFileW(
      com_name_ws.c_str(),
      GENERIC_READ | GENERIC_WRITE,
      0,
      NULL,
      OPEN_EXISTING,
      0,
      NULL
    );

  if(commHandle == INVALID_HANDLE_VALUE)
    throw("ERROR: Could not open com port");
  else {
    // set timeouts
    COMMTIMEOUTS timeouts;

    /* Blocking:
        timeouts.ReadIntervalTimeout = MAXDWORD;
        timeouts.ReadTotalTimeoutConstant = 0;
        timeouts.ReadTotalTimeoutMultiplier = 0;
       Non-blocking:
        timeouts = { MAXDWORD, 0, 0, 0, 0}; */

    // Non-blocking with short timeouts
    timeouts.ReadIntervalTimeout = 1;
    timeouts.ReadTotalTimeoutMultiplier = 1;
    timeouts.ReadTotalTimeoutConstant = 1;
    timeouts.WriteTotalTimeoutMultiplier = 1;
    timeouts.WriteTotalTimeoutConstant = 1;

    DCB dcb;
    if(!SetCommTimeouts(commHandle, &timeouts)) {
      Serial::~Serial();                                      <- Calls destructor!
      throw("ERROR: Could not set com port time-outs");
    }

    // set DCB; disabling harware flow control; setting 1N8 mode
    memset(&dcb, 0, sizeof(dcb));
    dcb.DCBlength = sizeof(dcb);
    dcb.BaudRate = bitRate;
    dcb.fBinary = 1;
    dcb.fDtrControl = DTR_CONTROL_DISABLE;
    dcb.fRtsControl = RTS_CONTROL_DISABLE;
    dcb.Parity = NOPARITY;
    dcb.StopBits = ONESTOPBIT;
    dcb.ByteSize = 8;

    if(!SetCommState(commHandle, &dcb)) {
      Serial::~Serial();                                    <- Calls destructor!
      throw("ERROR: Could not set com port parameters");
    }
  }

  if(cycleDtrOnStartup) {
    if(!EscapeCommFunction(commHandle, CLRDTR))
      throw("ERROR: clearing DTR");
    Sleep(200);
    if(!EscapeCommFunction(commHandle, SETDTR))
      throw("ERROR: setting DTR");
  }

  if(testOnStartup) {
    DWORD numWritten;
    char init[] = "PJON-python init";
    if(!WriteFile(commHandle, init, sizeof(init), &numWritten, NULL))
      throw("writing initial data to port failed");
    if(numWritten != sizeof(init))
      throw("ERROR: not all test data written to port");
  }
};

Serial::~Serial() {
  CloseHandle(commHandle);
};

// and there is more etc .......
// .............

在此示例中，您将一个子el = $('<div>').addClass('parent') .append( $('<div>').addClass('loadimg') );添加到某个父div中。您可以在此处使用更多div，并用.append，addClass和许多其他jQuery方法来装饰它们。

jQuery的开发人员已经在实现装饰器模式方面进行了艰苦的工作，是时候兑现他们的努力并开始使用它了。

Answer 4

请在 html 字符串的前后使用符号反引号 '`'，这就是所谓的模板文字，现在您可以在多行中编写纯 html 并分配给变量。

示例 >> var htmlString =

`

你的

HTML

`

jQuery创建并附加多个元素

4 个答案: