добавление класса и стиля шрифта в html и возврат html jQuery

Question

Я получаю текст HTML, в который я хочу добавить класс начальной загрузки после поиска тегов.Строка может иметь несколько тегов, и я хочу добавить тег шрифта с важными

. Например, я получил строку

var temp = "<div><table id='m' class='f'></table><table></table></div>";
table = $('table', temp).addClass('table-responsive').css('color', 'red!important').css('font-family', 'FS Lola,Arial,sans-serif!important');

Но я не знаю, как я вернусь выше HTML послеизменение стиля и шрифта для визуализации

Мое требование заключается в том, что строка становится динамической, а затем я хочу добавить класс к определенному элементу, а затем стиль шрифта. После всего этого я хочу отобразить этот HTMLв div

Answer 1

CSS всегда отображается первым.Поэтому в моем коде изначально цвет шрифта синий.

jquery не может изменить свойство цвета css, поскольку не может добавить важный суффикс.Так что использование кода $("table").css("color","red !important"); не работает .

В итоге я изменил объект javascript.Как только вы выбрали таблицу, используя $("table");, вы можете получить доступ к ее объекту javascript по индексу [0];$("table")[0];.

Полный скрипт для изменения! Важные CSS будет:

$("table")[0].style.setProperty( 'color', 'red', 'important' );

Чтобы добавить класс, просто выполните ;

// you don't need the second argument $("table", "somethingElse"). You only need the $("table")
$("table").addClass("className");

Попробуйте мой код ниже.

$(document).ready(function(){
  var t = $("table");
  
  // jquery doesn't work
  // $("table").css("color","red");
  
  // using javascript function does work, select the javascript object via [0] index
  t[0].style.setProperty( 'color', 'red', 'important' );
  t[0].style.setProperty( 'font-family', 'FS Lola,Arial,sans-serif', 'important' );
});

table{
  border:1px solid black;
  color:blue !important;
  border-collapse:collapse;
}

table th, table td{
  padding: 4px 10px;
  border-bottom:1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
  </tbody>
</table>

Answer 2

Вы можете создать элемент, используя jQuery, например так:

var table = $("<table id='m' class='f'></table>")

Теперь таблица существует в памяти как объект jQuery, но еще не была отображена на странице.Вы можете работать с таблицей динамически, например, добавив tr:

table.append($("<tr>"));

или добавив класс:

table.addClass("class_name");

Теперь мы можем добавить его на страницу.Предположим, вы хотите поместить его в тело вашей страницы.Вы можете сделать это следующим образом:

$("body").append(table);

Вы можете добавить его к div с помощью id=whatever вместо:

$("#whatever").append(table);

РЕДАКТИРОВАТЬ в зависимости от вашеготребование:

var temp = $("<div><table id='m' class='f'></table><table></table></div>");
temp.find("table").addClass('table-responsive').css('color', 'red!important').css('font-family', 'FS Lola,Arial,sans-serif!important');
$("body").append(temp);

Answer 3

Попробуйте, нужно пробел между! Важным

css('color', 'red !important').css('font-family', 'FS Lola,Arial,sans-serif !important')