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

尝试一下，在！important之间需要空格

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

Answer 2

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

jquery似乎无法修改css color属性，因为它无法添加重要的后缀。因此，使用代码$("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 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);

将类和字体样式添加到html并返回html jQuery

3 个答案: