Проблема с: содержит селектор в IE8

Question

Я работаю над следующим селектором в jQuery:

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

Другими словами: выберите div с идентификатором, начинающимся с WebPartWPQ, в котором есть таблица с классом ms-sitedirresultssort, в которой есть td, содержащий текст :. В конце этого вопроса приведен HTML-код, представленный SharePoint.

Селектор отлично работает в Firefox 3.5, но не в Internet Explorer 8. Я тестирую с помощью функции hide().

Я сузил его до td:contains(' : ') части селектора. Выполнение $("td:contains(' : ')") в Firebug Lite выводит весь список функций, например, что-то недопустимое. Все остальные селекторы отлично работают в 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 и пробелами, потому что анализатор HTML в IE такой же изворотливый, как и всегда.

Лично я бы старался избегать нестандартных селекторов jQuery, таких как :has и особенно :contains, так как они требуют, чтобы jQuery выполнял много медленной работы. Стандартные селекторы CSS2-3, с другой стороны, могут быть переданы в собственный механизм выбора браузера в новых браузерах с поддержкой Selectors-API (включая IE8).

Как насчет чего-то вроде:

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

~ - селектор CSS3 для любого последующего брата; IE8 поддерживает это.

Answer 2

Не уверен, что это так, но кажется, что проблема может быть связана с пробелами ... например, если я попробую предоставленный вами html и попытаюсь выбрать с помощью $("td:contains(' : ')") (в Firefox), я не получить совпадений, потому что содержимое td, которое вы пытаетесь сопоставить, на самом деле выглядит примерно так: <td>\n....:\n.....</td> (с . для пробелов и \n для новых строк). Другими словами, он не содержит ' : ' из-за новой строки (хотя выбор на ' :' работает). Так что это всего лишь предположение, но, возможно, IE8 выполняет некоторые чистые пробелы при создании своего дерева DOM, что означает, что ваш селектор ' : ' не соответствует должным образом.

Таким образом, предполагая, что будут другие td с : в них, и вы сразу после td с одним : (дополненным случайным пробелом), вы можете использовать чуть менее специфичный селектор и затем отфильтровать его функционально следующим образом:

$("div[id^=WebPartWPQ]:has(table.ms-sitedirresultssort) td:contains(':')")
    .filter(function() { return $.trim($(this).text()) == ":"; })
    .closest('div');

Не совсем так чисто, и, возможно, немного медленнее, но может подойти.