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

How to translate a DOM reference to a jQuery selector?

本文关键字：jQuery 选择器 转换 引用 DOM      更新时间：2023-09-26

我有这个代码：

        // 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方式，以便它们看起来相似。有没有一种干净简洁的方法来完成其中的一个或两个？

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";

您可以将DOM元素传递给jQuery:

$(event.currentTarget)

用jquery选择器包装当前目标，将其转换为jquery对象

$(event.currentTarget).addClass('active')
$(event.currentTarget).css('background', '#292B3C')
相关文章：