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

Question

UPDATE: I was able to get it to work by including a leading # into the string, like let $cropBoxLineLeft = $('#main-image-slider .slide.active #' + $activeImageWrapper + ' .cropper-container .cropper-crop-box').find('.line-w');

Is there any way I can condense some of that down? Just go straight from $activeImageWrapper to .cropper-crop-box then find the .line-w ? To repeat my original post, for example, this does not work:

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

And neither does filtering it down (though perhaps I'm misusing .filter()?)

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

Do I have to run through the "full" path all the way from #main-image-slider down to the eventual .line-w' ?

---

In earlier iterations I was able to find the proper element when using a "raw" string value like this:

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

However, now I've replaced the above #crop-image-wrapper with something that has a unique ID associated with it, currently saved in $activeImageWrapper .

I've tried variations on the above selector, but I don't know how to properly "use" the jQuery object. It keeps returning "Uncaught TypeError: Cannot read property 'nodeType' of undefined", so I'm obviously not selecting it properly.

For example, when i'm trying to concatenate them together, it doesn't seem to work:

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

Neither does trying to cut to the chase and 'find' on the object directly:

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

Any ideas where I'm going wrong here?

Thank you in advance for your help!

Answer 1

如果$activeImageWrapper是要选择的元素的ID，则需要在其$activeImageWrapper加上#使其成为正确的选择器。

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