jquery - :contains selector in IE8 的问题

Question

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

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

换句话说:选择 ID 以 WebPartWPQ 开头的 div，该 div 具有类 ms-sitedirresultssort 的表，该表的 td 包含文本 :。这个问题的最后是 SharePoint 呈现的 HTML。

该选择器在 Firefox 3.5 下完美运行，但在 Internet Explorer 8 下则不然。我正在使用 hide() 函数进行测试。

我已将范围缩小到选择器的 td:contains(' : ') 部分。在 Firebug Lite 中运行 $("td:contains(' : ')") 会转储出一整套函数，就像某些内容无效一样。所有其他选择器在 FB Lite 中都工作正常。

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

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>

Answer 1

<td>
    :
</td>

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

<td> : </td>

现在在 IE 和 Firefox 中确实给出了不同的结果。 contains 在 IE 中不匹配，因为它的解析器已经默默地丢弃了空格，就像 IE 喜欢做的那样。如果您查看 innerHTML，您会看到:

<TD>: </TD>

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

因此请小心使用 contains 和空格，因为 IE 的 HTML 解析器一如既往地古怪。

就我个人而言，我会尽量避免使用非标准 jQuery 选择器，例如 :has，尤其是 :contains，因为它们需要 jQuery 来完成大量缓慢的工作。另一方面，标准 CSS2-3 选择器可以在具有 Selectors-API 支持的较新浏览器(包括 IE8)中传递给浏览器自己的选择器引擎。

怎么样:

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

~ 是任意后续兄弟的 CSS3 选择器； IE8确实支持。