jQuery - 修改 HTML 字符串答案

【问题标题】：jQuery - modify HTML stringjQuery - 修改 HTML 字符串
【发布时间】：2013-12-31 10:04:17
【问题描述】：

有人可以告诉我如何在将 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 样式。

我有点卡住了。我错过了一步吗？

【问题讨论】：

您是要更改文本颜色还是背景颜色？
你能制作jsfiddle.net这个问题的demo吗？
您的代码应该可以工作，您确定您的页面不包含任何规则来隐藏您正在添加的元素吗？
你在“aside”之前少了一个点吗？
是否有任何令人信服的理由不将其添加到 DOM 并然后更改其 css？

标签： jquery html ajax

【解决方案1】：

看起来您正在更改颜色，然后将未更改的字符串添加到 DOM。试试这个：

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

【讨论】：

很好的答案 :) 它可以简化如下： $html.find('h1').css('color', 'red').end().insertAfter('aside')
注意：如果你想要字符串中的根元素，你不能在上面使用find，因为变量是的根元素。

【解决方案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() );
  }
});

【讨论】：

【解决方案3】：

试试这个：

$(html).find('h1').css('color', 'red').parent().insertAfter('aside');

【讨论】：

这只会插入 h1 而不是整个 html 元素

【解决方案4】：

尝试将 !important 添加到 css 样式中：

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

【讨论】：

你不能在 .css 调用中使用 !important。