问题：在IE8中包含选择器 [英] Problem with :contains selector in IE8

问题描述

我正在使用jQuery中的以下选择器：

I'm working on the following selector in jQuery:

$("div[id^=WebPartWPQ]:has(table.ms-sitedirresultssort) td:contains(' : ')").closest('div')

换句话说：选择ID为 WebPartWPQ 的div，其中包含类的表ms-sitedirresultssort 有一个包含文本：的td。在这个问题的最后是由SharePoint呈现的HTML。

In other words: select the div with ID starting with WebPartWPQ that has a table with class ms-sitedirresultssort that has a td containing the text :. At the end of this question is the HTML rendered by SharePoint.

选择器在Firefox 3.5下完美运行，但不在Internet Explorer 8下。我正在使用 hide（） function。

The selector works perfectly under Firefox 3.5, however not under Internet Explorer 8. I'm testing by using the hide() function.

我把它缩小到 td：contains （'：'）选择器的一部分。在Firebug Lite中运行 $（td：contains（'：'））会转出一些完整的函数列表，例如无效的函数。所有其他选择器在FB Lite中运行良好。

I've narrowed it down to the td:contains(' : ') part of the selector. Running $("td:contains(' : ')") in Firebug Lite dumps out a whole list of functions like something isn't valid. All the other selectors work fine in FB Lite.

我尝试过使用jQuery 1.3.2和jQuery 1.4rc1但没有成功。这是jQuery中的一个错误，如果有的话，它有一张票（我找不到）？关于如何最好地解决这个问题的任何想法？

I've tried using jQuery 1.3.2 and jQuery 1.4rc1 without success. Is this a bug in jQuery and if so is there a ticket for it (I can't find one)? Any ideas on how to best get around this?

HTML：

<div style="" helpmode="1" helplink="/_layouts/help.aspx" allowdelete="false" class="ms-WPBody"
    width="100%" id="WebPartWPQ4" haspers="false" webpartid="2ae67b12-82db-4238-8be9-cd4b39cbd15a">
    <table cellspacing="0" cellpadding="0" border="0" width="100%" xmlns:crwp="urn:schemas-microsoft-com:CategoryResultsWebPart"
        xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" xmlns:x="http://www.w3.org/2001/XMLSchema"
        class="ms-sitedirresultssort">
        <tbody>
            <tr>
                <td width="100%" />
                <td nowrap="">
                    <a href="#title">Sort by Title </a><span>| </span><a href="#url">Sort by Url </a>
                </td>
            </tr>
        </tbody>
    </table>
    <table cellspacing="0" cellpadding="0" border="0" width="100%" xmlns:crwp="urn:schemas-microsoft-com:CategoryResultsWebPart"
        xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" xmlns:x="http://www.w3.org/2001/XMLSchema"
        class="ms-sitedirresultspaging">
        <tbody>
            <tr>
                <td> : </td>
            </tr>
        </tbody>
    </table>
    <table cellspacing="0" cellpadding="0" border="0" width="100%" xmlns:crwp="urn:schemas-microsoft-com:CategoryResultsWebPart"
        xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" xmlns:x="http://www.w3.org/2001/XMLSchema"
        class="ms-sitedirresultsbody" id="table2">
        <tbody>
            <tr>
                <td valign="top">
                    <img alt="" src="/_layouts/images/lstbulet.gif" />
                </td>
                <td width="100%" class="ms-sitedirresultstitle">
                    <a href="http://site/cd10/_layouts/mysite.aspx?Redirect=1">Setup MySite</a>
                </td>
            </tr>
            <tr>
                <td />
                <td width="100%" class="ms-sitedirresultsurl">
                    <a dir="ltr" href="http://site/cd10/_layouts/mysite.aspx?Redirect=1">http://site/cd10/_layouts/mysite.aspx?Redirect=1</a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

推荐答案

<td>
    :
</td>

在任一浏览器中不包含： ，因为尾随换行符与空格不同。但是：

Doesn't contain : in either browser, as the trailing newline is different to a space. However:

<td> : </td>

现在确实在IE和Firefox中提供了不同的结果。 包含在IE中不匹配，因为它的解析器默默地抛弃了空白，就像IE喜欢做的那样。如果您查看 innerHTML ，您会看到：

now does give different results in IE and Firefox. The contains doesn't match in IE, because its parser has silently thrown away the whitespace, as IE likes to do. If you look at the innerHTML you see:

<TD>: </TD>

不出所料与选择器不匹配。

Which unsurprisingly doesn't match the selector.

所以要小心包含和空格，因为IE的HTML解析器和以前一样古怪。

So be careful with contains and whitespace because IE's HTML parser is as quirky as ever.

我个人而言尝试避免非标准jQuery选择器，如：has ，特别是：contains ，因为它们需要jQuery来做很多工作都很慢。另一方面，标准的CSS2-3选择器可以在具有Selectors-API支持（包括IE8）的较新浏览器中传递给浏览器自己的选择器引擎。

Personally I'd try to avoid non-standard jQuery selectors like :has and particularly :contains, as they require jQuery to do a lot of slow work. Standard CSS2-3 selectors, on the other hand, can be passed off to the browser's own selector engine in newer browsers with Selectors-API support (including IE8).

如何关于类似的事情：

$('.ms-sitedirresultssort ~ table td').filter(function() {
    return this.text().match(/(^|\s):(\s|$)/);
})

〜是任意后续兄弟的CSS3选择器; IE8确实支持它。

~ is a CSS3 selector for any-following-sibling; IE8 does support it.

这篇关于问题：在IE8中包含选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！