有問題：包含IE8

Question

我正在下面選擇在jQuery選擇：

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

換句話說：選擇帶有ID的DIV開始WebPartWPQ具有與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中的一個bug，如果有的話，是否有票（我找不到）？任何想法如何最好地解決這個問題？

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確實支持它。

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'); 

不太乾淨&可能有點慢，但可能是圍繞一個合適的工作。