Javascript - 在DIV中选择H1

我已经搜索了所有关于此的信息，并找到了看似正确的答案。但它不适合我。我有这个CKEditor在div中。在这个CKEditor中，有很多内容，我想在这个编辑器中的所有H1样式上添加一个悬停事件。Javascript - 在DIV中选择H1

DIV的结构是这样的：

<div id="content" class="cke_editable"> 
    <h1> 
     <span>My content</span> 
    </h1> 
</div>

我想实际使用qTip2，因为它似乎适合我的需要。但我无法设法选择H1标签。是因为它在一个既有ID又有类的div里面？或者它与H1内部有一个<span>标签有什么关系？

这里的JavaScript：

<script type="text/javascript"> 
var shared = { 
    position: { 
     my: 'top left', 
     at: 'bottom right', 
    }, 
    style: { 
     tip: true 
    } 
}; 

$('h1').qtip($.extend({}, shared, { 
    content: 'An example tooltip', 
    style: { 
     classes: 'ui-tooltip-red' 
    } 
})); 
</script>

当谈到选择，我已经试过只选择H1，就像这个例子。以及$('.cke_editable h1')，$('#content h1')和$('#content > h1')。但没有骰子。在我的CSS中，我已成功添加cursor: pointer至#content h1。那是有效的。

我在这里做错了什么？

编辑：如果我直接选择$('#content').qtip，它可以顺便运行。

来源

2013-02-19 Kenny Bones

CKEditor是否创建了这些元素？我认为这只是一个HTML文本的textarea。 – Kippie 2013-02-19 07:35:18

你是什么意思？如果我选择标题样式，CKEditor创建H1元素。 CKEditor适用于所有使用'cke_editable'类设置的div。以及'contenteditable =“true”' – 2013-02-19 07:41:00

的CKEditor的创建它放内容的iframe，所以你不能使用jQuery选择选择元素，因为它甚至不在同一个文档中。

来源

2013-02-19 07:49:09 Guffa

啊哈！我搜索了一下，看起来你是对的！ 'var frameDOM = $（'iframe.ckeditor'）。contents（）; $（'。selector'，frameDOM）.qtip（）' – 2013-02-19 07:53:06

我无法从frameDOM中获取任何内容。在Chrome中，我看到frameDOM中的Object是空的。 – 2013-02-19 08:04:52

@KennyBones：在当前实现中，它看起来应该使用'var frameDOM = $（'iframe.cke_wysiwyg_frame'）。contents（）;'。 – Guffa 2013-02-19 08:28:31

试图把它像这样：

$('h1','#content').qtip

或：

$('#content').find('h1').qtip

来源

2013-02-19 07:38:06 Jai

那里也没有骰子！我觉得很奇怪。也许是CKEditor搞砸了？我也尝试选择'$（'.cke_editable'）'，而这也行不通。它可能与脚本加载的顺序有关吗？ – 2013-02-19 07:43:43

好像其他人似乎有同样的问题：http://ho.runcode.us/q/howto-apply-a-jquery-plugin-qtip-inside-ckeditor – 2013-02-19 07:48:58

该代码是在'doc ready'还是'$ （window）.load（）' – Jai 2013-02-19 07:49:36

Javascript - 在DIV中选择H1

回答

相关问题