如何在Chrome Dev Tools中使用jQuery遍历执行上下文？

Question

如何在Chrome Dev Tools中使用jQuery遍历执行上下文？

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

在下面，您将看到我查询位于“最高”执行上下文中的内容的图像。 然后，您将在“ about：blank”上下文中看到我无法查询的图像（值为null）。

查询“顶部”上下文中顶部的类

查询“ about：blank”上下文中位于顶部的类

在下面，您将看到我查询“ 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') ，这就是为什么您在此处看到错误的原因： https : //i.stack.imgur.com/QQmST .png

jQuery选择器中的第二个参数提供了一个上下文来搜索：

jQuery( selector [, context ] )

要从iframe（关于：空白上下文）访问.mc-modal，您必须使用：

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

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

$（'iframe'）。contents（）。find（'。modalContent__content'）