jQuery - 修改HTML字符串

Question

请问我应该如何在将html插入文档之前修改它？

这是一个AJAX调用：

url: "http://localhost/cart/public/admin/album",
success: function(html) {

这是AJAX调用的结果：

<div class="main-content slide-in">
    <h1>Create Album</h1>
    <div class="inner">
    </div>
</div>

我想要做的就是改变 h1 标签的颜色。我已经添加了这段代码。

url: "http://localhost/cart/public/admin/album",
success: function(html) {
    $(html).find('h1').css('color','red');
    $('aside').after(html);

然而，这没有任何影响。jQuery选择器似乎是有效的。

url: "http://localhost/cart/public/admin/album",
success: function(html) {
    $(html).find('h1').css('color','red');
    console.log($(html).find('h1').length);
    $('aside').after(html);

使用console.log可以正确输出1，所以它能找到h1。但出于某些原因，CSS样式没有被应用。

我有点卡住了。我是否漏掉了什么步骤？

- Computer User

---

你是想改变文本颜色还是背景颜色？ - Rob Allen

你能否制作一个关于这个问题的 http://jsfiddle.net 的演示？ - Petr

你的代码应该是可行的，你确定你的页面没有包含任何隐藏你添加的元素的规则吗？ - Yuri Ghensev

你在 "aside" 前面漏了一个点吗？ - leo.vingi

有什么令人信服的理由不将其添加到DOM中，然后再更改其CSS吗？ - yoozer8

@leo.vingi有一点。如果“aside”是应用于某些元素的类，则需要使用$（'.aside'）。如果它是一个元素的ID，则需要使用$（'#aside'）。 - yoozer8

Answer 1

看起来你正在改变颜色，然后将未更改的字符串添加到DOM中。尝试这样做：

success: function(html) {
    var $html = $(html);
    $html.find('h1').css('color','red');
    $('aside').after($html);

- Tetaxa

---

很棒的答案 :) 它可以简化为以下代码：$html.find('h1').css('color', 'red').end().insertAfter('aside') - Kato

注意：如果您想从字符串中获取根元素，则不能在其上使用“find”，因为变量本身就是根元素。 - Scott Stevens

Answer 2

这里被接受的答案实际上浪费了我很多时间，至少它不是通用的。这是我花了一些时间后找到的结果。

$.ajax({
  url: "http://localhost/~yoelusa/the-url-of-your-string.html",
  success: function(htmldata) {
    var $html = $("<div/>").append( htmldata );
    // make your changes on the html string, see some example bellow relevant to my htmlstring
    $html.find('#left').html("");
    $html.find('#right').html("");
    $html.find('.commentlist').remove();
    // when you are ready to insert your string somewhere call the html() function, in my example I inserted it in an iframe
    $("iframe").attr("srcdoc", $html.html() );
  }
});

- Yoel Garcia

Answer 3

试试这个： $(html).find('h1').css('color', 'red').parent().insertAfter('aside'); 它可以找到所有的

标签，并将它们的文字颜色变为红色，然后将其父元素移动到

元素之后。

- leo.vingi

---

这将只插入h1标签，而不是整个html元素。 - Kato

Answer 4

尝试在CSS样式中添加!important：

$(html).find('h1').css("color", "red !important");

- James Johnson

---

在 .css 调用中不能使用 !important。 - Дамян Станчев