Question

我正在升级一些使用jQuery 1.7.2版本的旧软件。由于添加了一些新的插件并需要更新版本的jQuery，我已将其升级到版本1.12.1。

然而，有很多jQuery使用jQuery（htmlString）格式，例如：

  var html = $("<div>");

  // Prepare the <div> of comments
  $.each(data.comments, function() {
      console.log(this);
    html.append(
      $("<div>").attr("class", "comment").html(
        $("<div>").attr("class", "comment-profile-pic").html("").after(
          $("<div>").attr("class", "comment-text").html(
            $("<h1>").html(
              this.full_name + " at " + this.started_datetime
            ).after(
              $("<p>" + this.text + "</p>")
            )
          )
        )
      )
    );
  });

看起来版本1.9中的$（htmlString）已被折旧，并且在https://jquery.com/upgrade-guide/1.9/#jquery-htmlstring-versus-jquery-selectorstring阅读升级指南，它指出了识别html是否已传递到选择器的格式，但它也说：

当使用jQuery Migrate插件时，它将使用旧规则来确定传递给$（）＆＃34;的字符串是否类似于HTML＆＃34;。

我已经附加了jQuery migrate插件版本1.4.1，但它似乎没有任何区别，仍然无法识别选择器中的HTML。

编辑：我已经尝试将jQuery恢复到版本1.8.0并且它按预期工作，但是版本1.9.0打破了它。这意味着升级到v 1.9肯定是一个问题。

在进行进一步的测试之后，我已经意识到当你执行类似$("<div>").attr("class", "comment")的操作时，将html传递给选择器会起作用，但是当你按照上面的例子进行嵌套时，它不起作用。

有没有人知道如何解决这个问题而不重写所有将HTML传递到选择器的代码？

Answer 1

如果您阅读升级指南，您会发现如果html字符串不以<字符开头，则这只是一个问题：

从1.9开始，如果字符串以小于（＆＃34;＆lt;＆＃34;）字符开头，则该字符串仅被视为HTML。 Migrate插件可用于恢复1.9之前的行为。如果已知字符串是HTML但可以以不是HTML标记的任意文本开头，则将其传递给jQuery.parseHTML（），它将返回表示标记的DOM节点数组。

话虽这么说，你应该使用addClass()，而不是attr('class', 'foo')，你真的不应该将jQuery对象传递给html()方法。如果您检查documentation，您会看到它接受HTML字符串或函数。

您应该使用其中一种元素插入方法，例如append()，insert()，insertBefore()等，如下所示：

＆＃13;

var data = {
  comments: [{
    text: 'foo1',
    full_name: 'name1',
    started_datetime: 'started1'
  },{
    text: 'foo2',
    full_name: 'name2',
    started_datetime: 'started2'
  }]
}

var $parent = $("<div>").appendTo('body');

$.each(data.comments, function() {
  var $comment = $("<div>").addClass('comment').appendTo($parent);
  var $profilePic = $("<div>").addClass('comment-profile-pic').appendTo($comment);
  $("<div>").addClass('comment-text').html(`<h1>${this.full_name} at ${this.started_datetime}</h1><p>${this.text}</p>`).insertAfter($profilePic);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

jQuery migrate plugin不允许我使用jQuery（htmlString）

1 个答案: