Блог

Главная - Вопросы по программированию - jQuery не выводит правильный HTML

jQuery не выводит правильный HTML

#javascript #jquery #ruby-on-rails-3

#javascript #jquery #ruby-on-rails-3

Вопрос:

У меня есть очень старый проект 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 не возвращает это должным образом, поэтому вместо того, чтобы иметь list-group-item card-list-best внутри одного <li> класса, каким-то образом я выхожу card-list-best за пределы этой области, и результат выглядит так, как показано.

То же самое произойдет, если я сделаю:

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

Любая помощь приветствуется.

сегмент jquery

Комментарии:

1. почему вы используете jQuery для этого?

2. Проблема заключается в пробелах в атрибуте класса, который вы пытаетесь установить. Вам нужно заключить все значение атрибута в кавычки, чтобы в значении соблюдался пробел. Это не проблема jQuery, это часть стандарта HTML.

Ответ №1:

Вы можете добавить ' при сборке li .

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

как вы можете видеть в примере, я добавил журнал консоли, он возвращает <li class=list-group-item card-list-best>test</li> so, если " ' после этого нет или 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>