如何在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'）