jquery - 如何在引用 jQuery 对象的同时遍历多个“嵌套”DOM 元素？

Question

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

有什么办法可以浓缩其中的一部分吗？直接从$activeImageWrapper到.cropper-crop-box然后找到.line-w？例如，要重复我的原始帖子，这是行不通的：

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

也没有过滤掉它（尽管我可能误用了.filter（）？）

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

我是否必须从“完整”路径一直#main-image-slider到最终.line-w'？

---

在早期的迭代中，当使用这样的“原始”字符串值时，我能够找到正确的元素：

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

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

我已经尝试了上述选择器的变体，但我不知道如何正确“使用”jQuery 对象。它不断返回“Uncaught TypeError：无法读取未定义的属性'nodeType'”，所以我显然没有正确选择它。

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

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

也没有试图切入正题并直接在对象上“找到”：

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

有什么想法我在这里出错了吗？

预先感谢您的帮助！

标签： jqueryjquery-selectors

Answer 1

如果$activeImageWrapper是您要选择的元素的 ID，则需要为其添加前缀#以使其成为正确的选择器。

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