javascript - 如何将 DOM 引用转换为 jQuery 选择器？

Question

我有这个代码:

        // Mark all menu items inactive
        $(".sidebar-nav li").removeClass(); 

        // Mark current memu item active
        event.currentTarget.className = "active";

在此之前，我曾经有过这样的代码:

       $(".sidebar-nav li").css("background", "#383B4C");
       event.currentTarget.style.background = "#292B3C";

看到图案了吗？两个示例中的第一行都是 jQuery 选择器，因此使用了 jQuery 方法；第二行是 DOM 引用，因此没有 jquery。因此，即使操作有点相同，语法也是不同的。

对我来说，这有点代码味道。我想要么采用 jQuery 方式，要么采用非 jQuery 方式，以便它们看起来很相似。有没有一种干净简洁的方法来完成其中一个或两个？

Answer 1

jQuery方式

用 $(...) 包裹 event.currentTarget

$(".sidebar-nav li").removeClass(); 
$(event.currentTarget).addClass("active");

$(".sidebar-nav li").css("background", "#383B4C");
$(event.currentTarget).css('background',  "#292B3C");

javascript方式

使用querySelectorAll让您的生活更轻松

   var lis = document.querySelectorAll(".sidebar-nav li");
   for (var i = 0; i < lis.length; i++) {
       lis[i].className = '';
   }
   event.currentTarget.className = "active";

   for (var i = 0; i < lis.length; i++) {
       lis[i].style.background = '#383B4C';
   }
   event.currentTarget.style.background = "#292B3C";