Question

我尝试在父级iframe中的元素上应用fancyBox2。因此，我想使用以下选择器：

$('a.lightbox', $('#modal iframe').contents()).fancybox();

但是这个选择器无效。与此相反，以下选择器正在运行：

$('#modal iframe').contents().find('a.lightbox').fancybox();

第一个选择器甚至可以处理其他类型的功能，例如：

$('a.lightbox', $('#modal iframe').contents()).addClass('hidden');

为什么会这样？有什么区别？

Answer 1

有什么区别？

这：

$('a.lightbox', $('#modal iframe').contents());

...是这个的捷径（有时简称为速记）：

$('#modal iframe').contents().find('a.lightbox');

...这意味着当你执行第一个（快捷方式）时，会调用第二个。

快捷方式有助于加快和简化编码，但就性能而言，使用直接方法或功能总是更好。

例如，如果您有三个元素共享相同的选择器，如：

<a class="fancybox">...</a>
<a class="fancybox">...</a>
<a class="fancybox">...</a>

这些将产生相同的结果：

var counter1 = $("html").find(".fancybox").length;          // returns 3
var counter2 = $(".fancybox", $("html")).length;            // returns 3
var counter3 = $(".fancybox", $("html").contents()).length; // returns 3

为什么会这样？（或者为什么它起作用或不起作用？）

这取决于许多因素，例如您操作DOM的位置和时间（上下文），但在使用 iframe 时，您必须确保：

iframe 竞赛已满载
在DOM（在iframe内）准备就绪时绑定事件

为了保持一致性（以及跨浏览器兼容性，我敢说）我会使用.load()方法来验证 iframe 内容是否已完全加载以及.each()迭代我想要操作的选择器或绑定事件的方法，如：

$('#modal iframe').load(function () {
    // iframe is loaded, then
    var that = $(this); // the iframe element     
    that.contents().find('a.lightbox')
    .each(function () {
        $(this) // the lightbox selector
        // bind events or manipulate elements
        .addClass("whatever")
        .fancybox();
    });
});

或者如果您更喜欢快捷方式格式：

$('#modal iframe').load(function () {
    // iframe is loaded, then
    var that = $(this); // the iframe element     
    $('a.lightbox', that.contents()) // shortcut format
    .each(function () {
        $(this) // the lightbox selector
        // bind events or manipulate elements
        .addClass("whatever")
        .fancybox();
    });
});

他们应该在任何浏览器中都能很好地工作。使用快捷方式格式 HERE is a DEMO 。

fancyBox2 iframe选择器与父级的差异

1 个答案: