problème: contient sélecteur IE8

Question

Je travaille sur le sélecteur suivant dans jQuery:

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

En d'autres termes: sélectionnez le div avec l'ID commençant par WebPartWPQ qui a une table avec classe ms-sitedirresultssort qui a un td contenant le texte :. À la fin de cette question est le HTML rendu par SharePoint.

Le sélecteur fonctionne parfaitement sous Firefox 3.5, mais pas sous Internet Explorer 8. Je teste en utilisant la fonction hide(). J'ai réduit la partie td:contains(' : ') du sélecteur. Exécuter $("td:contains(' : ')") dans Firebug Lite vide une liste complète de fonctions comme quelque chose n'est pas valide. Tous les autres sélecteurs fonctionnent bien dans FB Lite.

J'ai essayé d'utiliser jQuery 1.3.2 et jQuery 1.4rc1 sans succès. Est-ce un bug dans jQuery et si oui, y at-il un ticket pour cela (je ne peux pas en trouver un)? Des idées sur la meilleure façon de contourner cela?

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> 

Ne contient pas : dans ces deux navigateurs, comme le saut de ligne est différent d'un espace. Cependant:

<td> : </td> 

donne maintenant des résultats différents dans IE et Firefox. Le contains ne correspond pas dans IE, car son analyseur a jeté silencieusement les espaces, comme IE aime faire. Si vous regardez le innerHTML vous voyez:

<TD>: </TD> 

Ce qui ne correspond pas sans surprise le sélecteur.

Soyez donc prudent avec contains et les espaces puisque l'analyseur HTML d'IE est aussi original que jamais.

Personnellement, j'essaierais d'éviter les sélecteurs jQuery non standard comme :has et particulièrement :contains, car ils nécessitent que jQuery fasse beaucoup de travail lent. D'un autre côté, les sélecteurs CSS2-3 standard peuvent être transmis au propre moteur de sélection du navigateur dans les nouveaux navigateurs avec le support de Selectors-API (y compris IE8).

Que diriez-vous quelque chose comme:

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

~ est un sélecteur de CSS3 pour tout-following-sibling; IE8 le supporte.

Answer 2

Je ne sais pas si c'est le cas, mais il semble possible que le problème soit lié aux espaces ... par exemple si j'essaye le code HTML que vous avez fourni & essayez de sélectionner avec $("td:contains(' : ')") (dans Firefox), je reçois pas de correspondances, parce que le contenu du td que vous essayez de faire correspondre est en fait quelque chose comme: <td>\n....:\n.....</td> (avec . pour les espaces & \n pour les nouvelles lignes). En d'autres termes, il ne contient pas ' : ' en raison de la nouvelle ligne (la sélection sur ' :' fonctionne cependant). Donc, c'est juste une supposition, mais peut-être IE8 fait un peu de nettoyage de l'espace brut lors de la création de son arbre DOM, ce qui signifie que votre sélecteur ' : ' ne correspond pas correctement.

Donc, en supposant qu'il y aura d'autres td « s avec : » s dans les & vous êtes juste après la td avec le single : (avec un espace aléatoire rembourré), vous pouvez utiliser un sélecteur légèrement moins spécifique & puis filtrer que vers le bas fonctionnellement comme ceci:

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

Pas tout à fait aussi propre & probablement un peu plus lent, mais peut-être un travail approprié autour.