找到& lt; style>标签按类不工作

Find <style> tag by class not working

本文关键字：工作 lt style 找到 标签      更新时间：2023-09-26

我使用AJAX来获取一些HTML标记。我想使用find()从获取的标记中添加一些样式标记(带有类)到我自己的文档。但是，jQuery似乎不喜欢下面的方法。

(链接因缺乏信誉而被删除)

有人能解释一下为什么这不起作用，并指出我正确的方向吗?

提前谢谢你。

解决方案
  • 首先使其成为本地元素(并删除脚本标签作为额外的预防措施)。http://jsfiddle.net/T6QCR/5/
  • 也，简单得多，使用innerHTML代替.html()工作，作为设置innerHTML不评估脚本，并允许.find()的功能。http://jsfiddle.net/T6QCR/8/
  • 还有，下面是laconbass的回答。

谢谢你的帮助!

解析HTML块，而不是直接传递给jQuery

从jQuery函数文档为您正在使用的情况:

(…)，如果字符串看起来是一个HTML片段，jQuery尝试按照HTML的描述创建新的DOM元素。然后是一个jQuery对象创建并返回引用这些元素的。你可以表演

(…)

如果HTML比没有属性的单个标记更复杂，则作为在上面的例子中，元素的实际创建是由浏览器的innerHTML机制处理。在大多数情况下，jQuery元素的innerHTML属性元素到传入的HTML片段。

(…)

当传入复杂的HTML时，一些浏览器可能不会生成DOM它完全复制所提供的HTML源。如前所述，jQuery使用浏览器的.innerHTML属性来解析传入的HTML和将其插入当前文档。在这个过程中，一些浏览器会过滤掉某些元素，如、或元素。因此，插入的元素可能不是传递的原始字符串的代表。

文档建议使用$.parseHtml()

要将字符串显式解析为HTML，使用$.parseHTML()方法。

$.filter代替$.find

正如您所注意到的，$.find在这个示例中不起作用。我已经成功地将其替换为$.filter调用。

// this works
$html.filter('.test');
// this doesn't works
$html.find('.test');
// better if you filter also by tag
// surely you will have more tags other than <style> on the retrieved html
$html.filter('style.test');

body没有定义，控制台也会以错误的方式给出指示。如果你想使用jQuery来选择标记主体和附加样式，那么你需要使用一个合适的选择器:

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

<style>元素不能有class属性，因为Uncaught SyntaxError: Unexpected identifier .

下面的代码应该可以工作了:

var html = '<html><head><style>aaa</style></head></html>';
var $html = $.parseHTML(html);
$.each($html, function(i, el) {
    if(el.nodeName == "STYLE") {
        $("head").append(el.outerHTML);
        return false;
    }
});

我不太确定为什么会这样，但这与文档模型及其工作方式有关。您不能只保留一个包含html文本的临时变量，您需要将其全部放入以某种方式附加到文档的元素(如div)中。这个div可以从用户的视图中隐藏。

<html>
  <head>
    <div></div>
  </head>
  <body>
    <script>
      jQuery(document).ready(function($) {
        $('div').hide().html('<html><head><style class="test"></style></head></html>'); // From AJAX request
        var $style = $('div').find('.test');
        document.body.appendChild($style[0]);
      });
    </script>
  </body>
</html>
相关文章：