如何在 jQuery 选择器中更改上下文答案

【问题标题】：How to change context in jQuery selector如何在 jQuery 选择器中更改上下文
【发布时间】：2017-08-15 21:31:02
【问题描述】：

我正在处理两个单独的 HTML 文件； one 文件是主页，而文件 two 包含 Kendo-UI 弹出对话框的主体。该弹出窗口在主页中使用。

在文件 two 的 Javascript 中，我尝试引用文件 one 中的 HTML 元素。它不起作用。

通过一些调试，我设法发现了以下内容：

// In Javascript of file two.
console.log($("#StartPayrollButton"));
// Output in Firefox console:
Object { context: HTMLDocument → CalendarDetails, selector: "#StartPayrollButton" }

这是我在控制台中手动运行同一行时得到的结果：

// Manually run in the Firefox console.
console.log($("#StartPayrollButton"));
// Output in Firefox console:
Object { 0: <a#StartPayrollButton.btn.btn-large.btn-squared-default.blue>, length: 1, context: HTMLDocument → MA0004, selector: "#StartPayrollButton" }

有人可以向我解释发生了什么吗？我注意到context 的结果不同；第一个结果引用文件 two，而第二个结果引用网页（因此引用文件 one）。

但是在这个上下文中什么是上下文（可怕的双关语）？我可以以某种方式更改代码中的上下文吗（使用 jQuery 选择器时）？

编辑：我去发现了对话框是如何创建的。确实是iframe：

// Razor in file one.
@(Html.Kendo().Window()
        .Name("PayrollWindow")
        .Title("Start Payroll")
        .Content("Loading payroll options...")
        .LoadContentFrom("CalendarDetails", "Payroll", new { co = Model.Co, guid = Model.calendarId })
        .Draggable()
        .Modal(true)
        .Iframe(true)
        .Visible(false)
        .Width(800)
        .Height(530)
        .Deferred()
    )

【问题讨论】：

按页面，您的字面意思是两个不同的页面，因为您的对话框使用 iframe？
使用不同的 id 来避免像“#StartPayrollButton-one”这样的混淆。
@KevinB 我不知道，因为我最初并没有实现这个。我可以问问开发者明天什么时候来。
你也可以检查元素...
@SaurabhGupta 该问题与重复 ID 无关；该 ID 仅在文件 one 中使用一次，并且不用于文件 two 中的任何 HTML 元素。

标签： jquery html jquery-selectors

【解决方案1】：

上下文基本上是它开始搜索给定选择器的起点，原生 JavaScript 中的等价物类似于

var context = document.getElementById('parent'); // the context here is "document"

var child = context.getElementById('child'); // now the context is the "#parent" element

在 jQuery 中，您可以将上下文设置为 $() 的第二个参数

$(selector, context)

在 jQuery 中的意思是一样的

$('#child', '#parent')

当然，这些只是示例，ID 必须是唯一的，因此对于 ID 使用上下文并不是真正必要的，但对于某些其他类型的选择器，这样做是有意义的，只选择其他元素中的元素等. 事实上 jQuery 的上下文做的事情和

$('#parent').find('#child')

【讨论】：

感谢您的澄清！是否可以将上下文强制为整个 HTML 页面，而不仅仅是 Kendo-UI 对话框？
我想这取决于调用 $() 的内容，如果您无法控制在给定上下文中如何调用 $()，您以后可能无法更改它。

【解决方案2】：

我最终通过执行以下操作解决了这个问题：

window.parent.$("#StartPayrollButton");

注意window.parent，它允许单独iframe 中的对话框访问主页中的元素。

【讨论】：