我可以将类选择器从 jQuery 传递给 JavaScript 吗？答案

【问题标题】：Can I pass a class selector to JavaScript from jQuery?我可以将类选择器从 jQuery 传递给 JavaScript 吗？
【发布时间】：2015-01-17 12:41:58
【问题描述】：

我有一个包含 10,000 多个 div 元素的巨大 UI（对于我正在做的一个实验）。我想找到一个超级快速的选择器方法，应该是非常原始的香草 JS。

我的 10,000+ 个divs 是大容器，其中 .b0 - .b123 的类（大数）持有较小的imgs，每个图像都有一个.q0 - .q100 的类

我想知道是否可以使用我的行以某种方式获取在 jQuery 事件处理程序中单击的图像的容器 div：

document.getElementsByClassName( e.target.className.replace( 'q', 'b' ) )[0];

e 将是 jQuery 事件。

或者有更快的方法吗？

【问题讨论】：

你试过了吗，应该可以吗？
只有一件事，className 不应该包含任何句点，看起来你得到的元素与 e.target 中已有的元素完全相同？
试一下，我列出的方法搜索整个文档
不，因为他们单击 div 内的图像，目标当前是图像，但必须搜索整个文档，不知何故我需要使用图像所在的 div 来加快搜索速度
澄清：（通过您使用的任何方法...）e.target 当前指的是img 元素，对吗？你想得到它的父母div？ e.target.parentNode 不适合这种情况吗？

标签： javascript css-selectors

【解决方案1】：

DOM 上/下遍历在 Javascript（其中 JQuery 就是）中比较简单。

元素可以通过parentNode访问其父级

element.parentNode

父母可以通过childNodes访问他们的孩子

element.childNodes

因此访问您的图片的父级（您的图片在e.target 中）将是

e.target.parentNode

【讨论】：

【解决方案2】：

文档上的事件委托（或树中包含所需元素的任何其他元素）

这将为单击的 img 添加一个类。

根据您给出的 jQuery 示例，它看起来像这样

$(document).on("click", "img", function(){
    var img = $(this);
    img.toggleClass("selected");
});

JavaScript 等价于使用目标

document.body.addEventListener("click", function(evt) {
    var elem = evt.target;
    if (elem.tagName === "img") {
        elem.classList.toggle("selected");
    }
});

【讨论】：