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

回答

相關問題