1

Tengo lo siguiente, necesito ocultar lo que contenga la clase precio siempre y cuando la clase prueba exista.

así me funciona pero lo que quiero es me oculte la info de la misma y no oculte la info de los otros que comparten clase.

Como podría hacerlo?

<ul class="lista">
    <li class="precio">Uno</li>
    <li>Dos</li>
    <li>Tres</li>
</ul> 

<ul class="lista">
    <li class="precio">Uno</li>
    <li class="prueba">Dos</li>
    <li>Tres</li>
</ul> 


$( document ).ready(function() {
    if (jQuery("li").hasClass("prueba")){
        console.log("prueba");
        $(".precio").css("display", "none");
    }
}); 

2 respuestas 2

3

Lo puedes hacer de una manera sencilla, con querySelectorAll

document.querySelectorAll(".lista").forEach(el => {
  if (el.querySelector(".prueba")) {
    el.querySelector(".precio").style.display = "none";
  }
});
<ul class="lista">
    <li class="precio">Uno</li>
    <li>Dos</li>
    <li>Tres</li>
</ul> 

<ul class="lista">
    <li class="precio">Uno</li>
    <li class="prueba">Dos</li>
    <li>Tres</li>
</ul>

Vamos a recorrer cada elemento con la clase .lista, el método anteriormente dicho nos da una lista de nodos la cual podremos recorrer con forEach, el cual nos dará el elemento con la clase .lista, con querySelector comprobaremos si existe un elemento .prueba dentro de lista, de existir, se oculta .precio

2

En tu ejemplo prueba esta dentro de un ul, por lo que es necesario recorrerlo (Para ir iterando cada li y saber si tiene o no la clase prueba), para ello utilizamos .each.

Ahora, si quieres ocultar el li que contiene la clase precio, entonces podemos utilizar hide() y posteriormente parent() para obtener el ul referenciado (Porque estamos dentro de una iteracion) para despues ocultar los li-s que contiene la clase precio, asi:

$(document).ready(function() {
  $('.lista > li').each(function() {
    if ($(this).hasClass("prueba")) {
      $(this).parent().find('.precio').hide();
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="lista">
  <li class="precio">Uno</li>
  <li>Dos</li>
  <li>Tres</li>
</ul>

<ul class="lista">
  <li class="precio">Uno</li>
  <li class="prueba">Dos</li>
  <li>Tres</li>
</ul>

Referencia

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.