fancyBox2 iframe选择器与父级的差异
fancyBox2 iframe选择器与父级的差异
提问于 2015-03-20 16:57:27
我尝试将fancyBox2应用于父元素中的iframe中的元素。因此，我想使用以下选择器：
$('a.lightbox', $('#modal iframe').contents()).fancybox();但是这个选择器不起作用。与之相反，下面的选择器是有效的：
$('#modal iframe').contents().find('a.lightbox').fancybox();第一个选择器甚至可以使用其他类型的函数，例如：
$('a.lightbox', $('#modal iframe').contents()).addClass('hidden');为什么会这样呢？有什么关系呢？
回答 1
Stack Overflow用户
发布于 2015-03-21 05:58:49
有什么区别？
这一点：
$('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();
});
});它们在任何浏览器中都应该工作得同样好。使用快捷方式格式的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29162745
复制相关文章
相似问题
腾讯云开发者
