我可以将 class 选择器从 jQuery 传递到 JavaScript 吗？

Question

我有一个巨大的 UI，包含超过 10,000 个 div 元素（用于我正在进行的实验）。我想找到一个超快速的选择器方法，它应该是非常原始的 vanilla JS。

我的 10,000+ div 是大容器，class 的 .b0 - .b123（大数）容纳较小的 img，每个图片的 class 为 .q0 - .q100

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

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

其中 e 将是 jQuery 事件。

或者会有更快的方法吗？

Answer 1

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

这将添加一个 class 到被点击的 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");
    }
});

Answer 2

DOM up/down遍历在Javascript中比较简单（其中JQuery）

元素可以通过 parentNode

访问它们的 parent

element.parentNode

和 parent 可以通过 childNodes

访问他们的 children

element.childNodes

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

e.target.parentNode

我可以将 class 选择器从 jQuery 传递到 JavaScript 吗？

Can I pass a class selector to JavaScript from jQuery?

javascript

css-selectors