Tengo el siguiente código para establecer la opacidad de todos los elementos que no se desplazan a 0,5.
const handleHover = function (e) { if ($(e.target).hasClass("nav_link")) { const siblings = e.target.closest("nav").querySelectorAll(".nav_link"); siblings.forEach((el) => { if (el !== e.target) el.style.opacity = this; }); } }; $(".nav").on("mouseover", handleHover.bind(0.5)); $(".nav").on("mouseout", handleHover.bind(1));Mi pregunta es ¿cómo puedo escribir el ciclo forEach en los hermanos usando un método jQuery en lugar de usar querySelectorAll?
No usaría JavaScript o jQuery en absoluto para esto.
Con CSS, puede apuntar a todos los elementos .nav_link que se encuentran dentro de un navegador que se está nav pero que son ellos mismos, no se desplazan.
.nav_link { transition: opacity .1s; cursor: pointer; } nav:hover .nav_link:not(:hover) { opacity: .5; } <nav> <ul> <li class="nav_link">Link #1</li> <li class="nav_link">Link #2</li> <li class="nav_link">Link #3</li> <li class="nav_link">Link #4</li> </ul> </nav>Para completar, aquí hay una versión jQuery
// Delegated hover in / out event handler $("nav").on("mouseenter mouseleave", ".nav_link", e => { $(e.delegateTarget) // start at "<nav>" .find(".nav_link") // find all the links .not(e.target) // except the hovered one .toggleClass("fade"); // toggle the "fade" class }); .nav_link { cursor: pointer; transition: opacity .1s; } .fade { opacity: .5; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script><nav><ul><li class="nav_link">Link #1</li><li class="nav_link">Link #2</li><li class="nav_link">Link #3</li><li class="nav_link">Link #4</li></ul></nav>