2011-06-14 18 views
6

He estado buscando usar nth-child dentro de un selector nth-child para encontrar un elemento. Esto parece funcionar en Firefox, pero parece que no funciona en Chrome. Aquí está mi archivo de prueba:querySelector anth-child anidado en Chrome no parece funcionar

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>untitled</title> 
    <!--[if IE]> 
     <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 

    <script type="text/javascript" charset="utf-8"> 
     myFunc = function() { 
      if(document.querySelector('#wonderful DIV:nth-child(2) DIV:nth-child(2)')) { 
       alert("found the element"); 
      } else { 
       alert("element not found"); 
      } 
     }; 
    </script> 
</head> 
<body onLoad="myFunc()"> 

    <div id="wonderful"> 
     <div> 
     </div> 
     <div > 
      <div> 
      </div> 
      <div class="blue"> 
       find me! 
      </div> 
     </div> 
    </div> 

</body> 
</html> 

alguien más ha visto este problema? ¿Tienes una solución para evitar esto?

Respuesta

9

Esto funcionó para mí en Chrome, pero luego no funciona en FF.

document.querySelector('#wonderful div:nth-child(2):nth-child(2)') 

Las siguientes obras snipped en ambos navegadores, pero supongo que sabes que ya

document.querySelector('#wonderful div:nth-child(2) div.blue') 

por lo que parece un fallo de aplicación en cromo para mí.

+0

sí, muy interesante. No había probado el primero, pero el segundo que sabía. Sería bueno tener una forma de navegador cruzado de hacer esto sin usar XPath. – zacharyc

+0

Su primer fragmento no tiene sentido. Bueno, sí, pero ': nth-child (2): nth-child (2)' es lo mismo que ': nth-child (2)' ... – BoltClock

+0

@BoltClock Tienes razón, no tiene sentido, pero funciona. Es por eso que asumí que es un error de implementación en Chrome. – DanielB

Cuestiones relacionadas