javascript - 如何在 Chrome 开发工具中使用 jQuery 遍历执行上下文？

Question

如何在 Chrome 开发工具中使用 jQuery 遍历执行上下文？

背景故事和目标:我在任何地方都找不到答案。我是新人，所以我可能错误地问了这个问题，所以它可能非常明显。我已经使用开发工具中的样式和元素选项卡测试了我想要更改的类及其属性。我已经在 cPanel 中创建了要添加到 DOM 的类，并且知道可以使用哪些类来查询它们的插入点并删除旧类。我目前正处于测试 jQuery 代码的阶段，我想将其放入页脚中，将这些类插入到 DOM 中。我的最终目标是更改 WordPress 中模态框的大小和对齐样式。

下面您将看到我查询驻留在“顶部”执行上下文中的内容的图像。然后您将看到我在“about:blank”上下文中无法查询它的图像(值为 null)。

Querying class found in top in 'top' context

Querying class found in top in 'about:blank' context

下面您将看到我查询驻留在“about;blank”执行上下文中的内容的图像。然后您将看到我在“顶部”上下文中无法查询它的图像(值为 null)。

***看评论里下面这两张图，我缺乏声誉****

一行 jQuery 进行测试，四行 jQuery 有望实现我的目标。他们现在看起来像这样:

<script>
jQuery(document).ready(function(){
alert('jQuery Ready!');

jQuery(function($){
$('.modalContent__content').addClass('modalContent__content-mod').removeClass('modalContent__content');
$('mc-layout__modalContent').addClass('mc-layout__modalContent-mod').removeClass('mc-layout__modalContent');
$('.mc-modal').addClass('mc-modal-mod').removeClass('mc-modal');
$('.modalContent__image').addClass('modalContent__image-mod').removeClass('modalContent__image');
)};
)};
</script>

如果我无法在控制台中查询这些内容，那么我就没有机会在网站的页脚中进行查询。请帮忙。任何建议、文章或任何内容都欢迎。谢谢!

Answer 1

当您在 Chrome DevTools 中切换上下文时，您无法再访问父文档 DOM 元素，如下所示:$(".mc-modal') 这就是您在此处看到错误的原因: /image/QQmST.png

jQuery 选择器中的第二个参数提供了要搜索的上下文:

jQuery( selector [, context ] )

要从 iframe (about:blank context) 内访问 .mc-modal，您必须使用:

$(".mc-modal",parent.document)

现在要使用 jquery 从父级访问 iframe 上下文，您可以使用:

$('iframe').contents().find('.modalContent__content')