5

Me gustaria saber como puedo solo mostrar los elementos hijos con javascript por ejemplo.

<div class="row">
    <span class="red">66 
        <span>22 </span>
    </span>
    <span class="green">24
        <span class="blue" style="color: #000;">82 </span>
    </span>
    <span class="green">10 
        <span class="blue" style="color: #000;">1 </span>
    </span>
    <span class="red">69 
        <span>80 </span>
    </span>
    <span class="red">12 
        <span class="green" style="color: #000;">11 </span>
    </span>
 </div>

Me gustaria solo mostrar los "span" hijos

Tengo hecho algo así pero no funciona y no se como darle forma

function myFunction6() {
var foo = document.getElementsByTagName('span');
for (var i = 0; i < foo.children.length; i++) {
        console.log(foo.children[i].tagName);
}
}

Gracias

3
  • 1
    Un concejo: Usa nombres representativos en tus funciones. Te ahorra tiempo a la hora de acordarte q función era. Tanto para ti como para los q lean tu código. Commented el 14 may. 2018 a las 20:32
  • si los span que estan dentro de los span, Commented el 14 may. 2018 a las 20:35
  • Es que el problema lo daban así sorry Commented el 14 may. 2018 a las 20:36

2 respuestas 2

8

Si lo que quieres es quedarte sólo con los span que están dentro de otro span en el div con clase .row, te recomendaría que usases un selector diferente de getElementsByTagName. Por ejemplo, sería más conveniente usar querySelectorAll.

A esa función le pasas un selector como los de CSS y te devolverá todos los elementos que cumplen esa condición. Así por ejemplo, con el selector .row > span > span lo que vas a obtener son todos los elementos span que son hijos directos de otro span y que estén dentro de .row. Aquí lo puedes ver funcionando:

function myFunction6() {
  var foo = document.querySelectorAll('.row > span > span');
  for (var i = 0; i < foo.length; i++) {
    console.log(foo[i].tagName + " " + foo[i].textContent);
  }
}

myFunction6()
<div class="row">
  <span class="red">66 
    <span>22 </span>
  </span>
  <span class="green">24
    <span class="blue" style="color: #000;">82 </span>
  </span>
  <span class="green">10 
    <span class="blue" style="color: #000;">1 </span>
  </span>
  <span class="red">69 
    <span>80 </span>
  </span>
  <span class="red">12 
    <span class="green" style="color: #000;">11 </span>
  </span>
</div>

1
3

Se puede hacer con css, prueba con éste código... Los span hijos són de color verde.

$(document).ready(function(){
  $("span").each(function(){
    if($(this).parent().is("span")){
      $(this).hide();
    }
  });
});
div > span {
  color:red
  }
  span > span{
  color:green;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
    <span class="red">66 
        <span>22 </span>
    </span>
    <span class="green">24
        <span class="blue">82 </span>
    </span>
    <span class="green">10 
        <span class="blue" >1 </span>
    </span>
    <span class="red">69 
        <span>80 </span>
    </span>
    <span class="red">12 
        <span class="green">11 </span>
    </span>
 </div>

1
  • No es eso exactamente lo que necesito, necesito solo quedarme con los span que estan dentro del span es decir el valor Commented el 14 may. 2018 a las 20:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.