jQuery 不输出正确的 HTML答案

【问题标题】：jQuery doesn't output proper HTMLjQuery 不输出正确的 HTML
【发布时间】：2021-01-14 19:41:45
【问题描述】：

我正在维护一个非常古老的 Rails 3 项目，我需要向其中添加新功能。主要是 Bootstrap 4 的响应能力。

这就是我真正想要创建的：http://jsfiddle.net/k1zbe4o9/。如您所见，它在小提琴中完美运行。然而，这个项目使用 jQuery 来动态改变 HTML。 jQuery代码相当简单

if (best_price) {
  li_class = "list-group-item";
  li_class += " card-list-best";
}

我在这样的函数中使用它：

var list_html = $("<li class=" + li_class + ">" + list_details_html + "</li>");

但是，当我这样做时，我得到了一个奇怪的事情，即 jQuery 没有正确返回它，所以我没有在单个 <li> 类中使用 list-group-item card-list-best，而是以某种方式在该范围之外得到了 card-list-best，并且结果如图所示。

如果我这样做，也会发生同样的事情：

if (best_price) {
  li_class = "list-group-item card-list-best";
}

感谢任何帮助。

【问题讨论】：

你为什么要使用 jQuery？
问题是因为您尝试设置的类属性中的空格。您需要将整个属性值用引号括起来，以便在值中尊重空间。这不是 jQuery 问题，它是 HTML 标准的一部分。

标签： javascript jquery ruby-on-rails-3

【解决方案1】：

您可以在构建li 时添加'。

"<li class='" + li_class + "'>" + list_details_html + "</li>"

正如您在示例中看到的那样，我添加了一个控制台日志，它返回<li class=list-group-item card-list-best>test</li>，因此如果class= 之后没有" 或'，那么它将采用= 之后的值和直到第一个空格，所以它会返回<li class="list-group-item">test</li>

工作示例

var li_class = "";
var list_details_html = "test";
li_class = "list-group-item";
li_class += " card-list-best";
var list_html = $(
  "<li class='" + li_class + "'>" + list_details_html + "</li>"
);

console.log("<li class=" + li_class + ">" + list_details_html + "</li>")

$('ul').append(list_html)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul></ul>

【讨论】：