Necesito ayuda con el código, tengo dos bloques HTML div con el mismo nombre de clase y hay una etiqueta h2 adicional con una clase diferente presente en un bloque div. Quiero ocultar si el nombre de la clase h2 no está presente en ese div y mostrar si el nombre de la clase h2 está presente. Encuentre el código mencionado a continuación que he creado.
-- Primera división del bloque --
<div class="course-content"> <h2 class="accesshide"></h2> <ul class="topics"> <li class="data-list">Content not to Display</li> </ul> <div class="row"> <p>Content to Display</p> </div> </div>-- Segunda división del bloque --
<div class="course-content"> <ul class="topics"> <li class="data-list">Content not to Display</li> </ul> <div class="single-section"> <p>Content to Display</p> </div> </div>-- Código jQuery --
$(document).ready(function () { if ($(".course-content").find(".accesshide")) { $(".course-content").find(".topics").show(); } else if ($(".course-content").find(".single-section")) { $(".course-content").find(".topics").hide(); } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="course-content"> <h2 class="accesshide"></h2> <ul class="topics"> <li class="data-list">Content not to Display</li> </ul> <div class="row"> <p>Content to Display (this statement is inaccurate)</p> </div> </div> <div class="course-content"> <ul class="topics"> <li class="data-list">Content not to Display (this statement is inaccurate)</li> </ul> <div class="single-section"> <p>Content to Display</p> </div> </div>Esto es trivial usando un selector de niños CSS ( > ). Simplemente encuentre la colección de elementos que son un accesshide secundario de un course-content y oculte los topics secundarios de sus padres.
Podrías hacer algo similar con un selector descendiente ( ), pero como sabe que es un niño para este caso, el selector de niños es quizás más preciso.
Documentos de Child Combinator de MDN .
$(document).ready(function () { $('.course-content>.accesshide').parent().find('.topics').hide(); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="course-content"> <h2 class="accesshide"></h2> <ul class="topics"> <li class="data-list">Content not to Display</li> </ul> <div class="row"> <p>Content to Display</p> </div> </div> <div class="course-content"> <ul class="topics"> <li class="data-list">Content not to Display (this should actually be shown - there's no h2 in the parent div)</li> </ul> <div class="single-section"> <p>Content to Display</p> </div> </div>Dado que los controles son eventos independientes, deben evaluarse por separado. Por lo tanto, se deben usar dos bloques if separados. En el segundo evento de la solución a continuación, el primer elemento secundario del elemento principal del elemento seleccionado se oculta al seleccionarlo.
$(document).ready(function () { if ($(".course-content").find(".accesshide")) { $(".course-content > .accesshide").find(".topics").show(); } // Because both <div> elements have the ".topics" class style applied, the ".single-section" // element is selected and the first child element of the parent element is hidden. if ($(".course-content").find(".single-section")) { $(".course-content > .single-section").parent().children(':first-child').hide(); } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="course-content"> <h2 class="accesshide"></h2> <ul class="topics"> <li class="data-list">Content not to Display</li> </ul> <div class="row"> <p>Content to Display</p> </div> </div> <hr> <div class="course-content"> <ul class="topics"> <li class="data-list">Content not to Display</li> </ul> <div class="single-section"> <p>Content to Display</p> </div> </div>Quiero ocultar si el nombre de la clase h2 no está presente en ese div y mostrar si el nombre de la clase h2 está presente.
No necesita ningún código JS, solo CSS con combinador de hermanos adyacente o general . Por ejemplo:
.course-content .topics { display: none; } .course-content .accesshide + .topics { display: block; } Cuando tenga que usar jQuery, puede usar la misma lógica y el método .next() (o .nextAll() ):
$(".course-content").find(".topics").hide(); $(".course-content").find(".accesshide").next(".topics").show(); Si el bloque controlado puede estar tanto antes como después del bloque de control, la forma más corta es usar el método .siblings() . Si necesita mostrar el bloque .topics si hay un bloque .accesshide o un bloque .single-section cerca, puede usar este método jQuery para ambos casos:
$(document).ready(function () { $(".course-content").find(".topics").hide(); $(".course-content").find(".accesshide, .single-section").siblings(".topics").show(); }); <div class="course-content"> <ul class="topics"> <li class="data-list">Content not to Display</li> </ul> <div class="row"> <p>There are no special blocks nearby</p> </div> </div> <div class="course-content"> <h2 class="accesshide"></h2> <ul class="topics"> <li class="data-list">Show because of the .accesshide block</li> </ul> <div class="row"> <p>Case 1</p> </div> </div> <div class="course-content"> <ul class="topics"> <li class="data-list">Show because of the .single-section block</li> </ul> <div class="single-section"> <p>Case 2</p> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>