Javascript 在open shadow—root中匹配时，使用jQuery删除一个封闭的div类

发布于03月14日

我使用jQuery 3.7.1搜索多个span出现的类为"modified"，当找到它时，删除包含类为"item"的包封.

这在shadow root之前工作，并将关闭HTML中找到的所有实例.

$("span.modified").closest("div.item").remove();

但现在不是了我试过...

$("span.modified").shadowRoot.closest("div.item").remove();

但也没什么进展我有下面的示例代码，我正在寻找打开的影子根目录中的span，并试图删除不在影子根目录中的封闭div.我只是最近才知道暗影根，我很困惑.任何指向正确方向的指示将不胜感激.此外，我试图复制原来的功能，在页面上查找所有跨度，可能包含"修改"，并关闭所有封闭的div与类"项目"，

<div class="item">
       <a href="<SOME_LINK_HERE>" target="_blank">
            <x-cover volume="Test" id="23310203">
                #shadow-root (open)
                <div class="show" id="div">
                    <span class="modified">Modified</span>
                </div>
            </x-cover>
       </a>
</div>

更新:我刚刚了解到jQuery无法穿透Shadow DOM，因此解决方案似乎类似于...

使用jQuery查找所有x—cover元素.
迭代这些元素并使用vanilla JavaScript访问他们的影子
在shadow DOM中，找到修改了类的span元素.
对于找到的每个span，向上遍历div.entry并删除它.

我会更新一个解决方案，如果我找到一个当然.

<div class="item"> <a href="<SOME_LINK_HERE>" target="_blank"> <x-cover volume="Test" id="23310203"> <template shadowrootmode="open"> #shadow-root (open) <div class="show" id="div"> <span class="modified">Modified</span> </div> </template> </x-cover> </a> </div> <script> // delete class="item" having class="modified" in shadowRoot let x = document.body.querySelector("x-cover"); console.log(x); let modified = x.shadowRoot.querySelector("span.modified"); console.log(modified); let host = modified.getRootNode().host; // same as x here console.log(host); let div = host.closest("div.item"); console.log(div); // div.remove(); </script>

const shadowDive = ( el, selector, match = (m, r) => console.warn('match', m, r) ) => { let root = el.shadowRoot || el; root.querySelector(selector) && match(root.querySelector(selector), root); [...root.children].map(el => shadowDive(el, selector, match)); }

Javascript 在open shadow—root中匹配时，使用jQuery删除一个封闭的div类

推荐答案

Javascript相关问答推荐

JS、C++和C#给出不同的Base 64 Guid编码结果

仅圆角的甜甜圈图表

如何才能拥有在jQuery终端中执行命令的链接？

通过嵌套模型对象进行Mongoose搜索

InDesign—创建一个独立的窗口，在文档中进行更正时保持打开状态

Promise Chain中的第二个useState不更新

屏幕右侧屏障上的产卵点""

为什么按钮会随浮动属性一起移动？

在Java中寻找三次Bezier曲线上的点及其Angular

在VS代码上一次设置多个变量格式

<；img>；标记无法呈现图像

Reaction-SWR-无更新组件

如何在Press上重新启动EXPO-AV视频？

Docent.cloneNode(TRUE)不克隆用户输入

FireBase FiRestore安全规则-嵌套对象的MapDiff

重新呈现-react -筛选数据过多

通过解构/功能组件接收props-prop验证中缺少错误"

在将元素追加到DOM之前，createElement()是否会触发回流？混淆abt DocumentFragment行为

使用onClick单击子元素时，使用交点观察器的关键帧动画意外运行

使用重新 Select 和对象理解 Select 器备忘