如何遍历多个 "nested" DOM 元素同时引用一个 jQuery 对象？

Question

更新： 我能够通过在字符串中包含一个前导 # 来让它工作，比如 let $cropBoxLineLeft = $('#main-image-slider .slide.active #' + $activeImageWrapper + ' .cropper-container .cropper-crop-box').find('.line-w');

有什么办法可以将其中的一些浓缩下来吗？直接从 $activeImageWrapper 到 .cropper-crop-box 然后找到 .line-w?重复一下我原来的post，比如这个不行：

let $cropBoxLineLeft = $($activeImageWrapper).find('.cropper-container .cropper-crop-box .line-w');

过滤它也没有（虽然我可能误用了 .filter()？）

let $cropBoxLineLeft = $($activeImageWrapper).filter('.cropper-crop-box').find('.line-w');

我是否必须运行通过 "full" 路径从 #main-image-slider 一直到最终的 .line-w'？

在早期的迭代中，我能够在使用 "raw" 字符串值时找到合适的元素，如下所示：

let $cropBoxLeftLine = $('#main-image-slider .slide.active #crop-image-wrapper .cropper-container .cropper-crop-box').find('.line-w');

但是，现在我已经将上面的 #crop-image-wrapper 替换为具有与之关联的唯一 ID 的内容，当前保存在 $activeImageWrapper.

我尝试了上述选择器的变体，但我不知道如何正确 "use" jQuery 对象。它一直返回 "Uncaught TypeError: Cannot read property 'nodeType' of undefined"，所以我显然没有正确选择它。

例如，当我试图将它们连接在一起时，它似乎不起作用：

let $cropBoxLeftLine = $('#main-image-slider .slide.active ' + $activeImageWrapper + ' .cropper-container .cropper-crop-box').find('.line-w');

切入正题并直接 'find' 对象也没有：

let $cropBoxLeftLine = $($activeImageWrapper).find('.cropper-container .cropper-crop-box .line-e');

你知道我哪里出错了吗？

预先感谢您的帮助！

Answer 1

如果 $activeImageWrapper 是您想要 select 的元素的 ID，您需要在其前面加上 # 前缀以使其成为正确的 select 或者。

$(`#${$activeImageWrapper} .cropper-container .cropper-crop-box .line-w`);

如何遍历多个 "nested" DOM 元素同时引用一个 jQuery 对象？

How to traverse multiple "nested" DOM elements while also referencing a jQuery object?

jquery

jquery-selectors