如何通过数据属性

Question

我的页面中有一个iframe，我想通过选择带有“数据属性”的目标来移动元素，所以我想这样做：

var ifr=frames['myiframeID'].document;
var element='#idofdiv';
var destination='value_for_my_attribute';

我以此方式尝试

$(element,ifr).insertBefore('[data-my-attribute="'+destination+'"]'); 

并以此方式

$(element,ifr).insertBefore('[data-my-attribute="'+destination+'"]', ifr); 

两种方法都失败，什么也没发生。

我做错了什么？

更新 我检查一下：

console.log('check',$(element,ifr), $('[data-my-attribute="'+destination+'"]', ifra));

两者都将返回对象。

Answer 1

  

注意：正如您说的那样，您确实满足相同起源政策，因此从理论上讲，您应该可以访问和操作从属IFRAME DOM。

它不起作用的原因是选择器的工作方式。如果假定这两个元素都与代码运行所在的帧不在同一帧中，则需要选择两个元素并提供其父帧。您的代码没有。仅正确选择了要插入的元素，但没有选择目标数据属性参考元素的选择器。

$(element, ifr).insertBefore('[data-my-attribute="'+destination+'"]');
// ^ correct                 ^ incorrect

根据jQuery文档，您不能简单地将父元素添加到insertBefore函数调用中。

这应该可以工作：

var el = $(element, ifr);
var ref = $('[data-my-attribute="'+destination+'"]', ifr);
el.insertBefore(ref);
// or
ref.before(el);

这应该可以正常工作。