将类和字体样式添加到 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 之上

我的要求是字符串是动态的，然后我想添加 类到某个元素，然后是字体样式，毕竟这是我想要的 在 div 中渲染这个 HTML

Answer 1

CSS 总是首先呈现。所以在我的代码中，最初的字体颜色是蓝色的。

jquery 似乎无法修改 css 颜色属性，因为它无法添加重要的后缀。所以使用代码$("table").css("color","red !important"); 不起作用。

我最终做的是修改 javascript 对象。使用$("table"); 选择表格后，您可以通过索引 [0] 访问其 javascript 对象； $("table")[0];.

修改 !important 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

试试这个，!important 之间需要空格

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

Answer 3

您可以像这样使用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);