jQuery :contains() 选择器不工作 IE

Posted 2023-05-09

【中文标题】jQuery :contains() 选择器不工作 IE

【英文标题】：jQuery :contains() selector is not working IE

【发布时间】：2011-09-17 13:22:40

【问题描述】：

我正在使用 jQuery :contains() 选择器来仅显示我的 XML 文件中包含特定文本字符串的项目。它在 FF、Safari、Chrome 等中完美运行，但在 IE7、8 或 9 中无法正常运行。有什么想法吗？

jQuery(RSSqa).find("item:contains('Q & A with'):lt(1)").each(function()

这段代码显示 XML 中的最新项目，其中包含“Q & A with”。

这里是一些 RSS 提要

<rss version="2.0">
<channel>
<title>Headlines</title>
<link>Coyotes</link>
<description>Coyotes</description>
<lastBuildDate>Fri, 17 Jun 2011 16:54:44 EDT</lastBuildDate>
<item>
<title>Q &amp; A with Brandon</title>
<enclosure length="63471" type="image/png" url="http://google.com/images/upload/325.jpg"></enclosure><link>http://google.com/news.htm?id=56362</link>
<description>description</description>
<author>Dave</author>
<pubDate>Tue, 24 May 2011 09:58:00 EDT</pubDate>
<guid>http://google.com/news.htm?id=56362</guid>
<comments>Brandon is a winner</comments>
</item>
<item>
<title>Q &amp; A with Jason</title>
<enclosure length="63471" type="image/png" url="http://google.com/images/upload/323.jpg"></enclosure><link>http://google.com/news.htm?id=56363</link>
<description>description</description>
<author>Dave</author>
<pubDate>Tue, 24 May 2011 09:58:00 EDT</pubDate>
<guid>http://google.com/news.htm?id=56363</guid>
<comments>Brandon is a winner</comments>
</item>
</channel>
</rss>

这是整个脚本。我希望这会有所帮助。

    jQuery(document).ready(function()
                  

    jQuery.get('news.xml', function(RSSqa) // NEWS XML

    jQuery('#nrmr2.colModRight .DCnarModBody').append('<div class="DCnarModR" />');

    jQuery(RSSqa).find("item:contains('Q & A with'):lt(1)").each(function() 

                        var headline = jQuery(this);
                    var $enclosure = headline.find('enclosure');
                    var image = $enclosure.attr("url");
                        var headlinesTitle = headline.find('title').text();
                    var link = headline.find('guid').text();
                        var description = headline.find('description').text();
                        var teaser = headline.find('comments').text();
                        var author = headline.find("author").text();
                    var pubDate = headline.find("pubDate").text();

var qaData = '<img src="' + image +'"   >';                      
    qaData += '<a href="' + link + '" > <h1> ' + headlinesTitle + '</h1></a>';
    qaData += '' + teaser + ' <br clear="all" />';
    qaData += '<a href="' + link + '" class="mainButton" ><span>FULL STORY &rsaquo;</span></a>';
    jQuery('div.DCnarModR').append(jQuery(qaData));
    );
    );         
    );

【问题讨论】：

Works for me.

可能是& 需要转义，或者引用为& 吗？

@jnpcl：jQuery 正确处理实体，如我的小提琴所示。

也许我们需要看看你拥有的一些 XML。

@BoltClock 您的 jsfiddle 在 IE 中不起作用。我打开jsfiddle.net/F39kE/1，在IE中没有显示结果。

【参考方案1】：

我也见过这个。无论出于何种原因，jQuery 似乎只会对 Internet Explorer 中的实际 XML 对象执行其标准遍历功能。

我使用的解决方法是使用一些简单的特征检测首先查看您是否在 IE 中，然后将您的 XML 字符串转换为 XML 对象供 jQuery 使用。

类似：

function Convert(xmlStr) 
    if (window.ActiveXObject && (new window.ActiveXObject("Microsoft.XMLDOM") != null)) 
        var xd = new window.ActiveXObject("Microsoft.XMLDOM");
        if (xd) 
            xd.loadXML(xmlStr);
            return xd;
        
    
    return xmlStr;

然后，在您的代码中（我用您的示例 RSS 进行了尝试，它似乎在 IE8 中可以解决问题）。

jQuery.get('news.xml', function(RSSqa)  // NEWS XML
    RSSqa = Convert(RSSqa);
    jQuery(RSSqa).find("item:contains('Q & A with'):lt(1)").each(function()  
        /* rest of your code... */
    );
);

希望有帮助！