Javascript：獲取當前元素的同級[CKEditor所需]

Question

嘿，我正在為CKEditor開發一個簡單的插件，我對JavaScript不太了解，所以這是我的問題。

我上傳圖像，並在對話框中插入它，生成類似這樣的圖像。

<div class="float-right image">  
<img alt="alt-text" src="img.jpg" />   
<span class="caption">Caption</span>  
</div>

就像一個吊飾一樣工作，但是一旦我插入，我希望能夠對其進行編輯。 這樣做，我可以通過獲取alt屬性和圖像的src

var elem = this.getParentEditor().getSelection().getSelectedElement();

並使用getAttribute（'...'）。 但我不知道如何到達標題和div。

如果您能幫助我，我將非常高興。 提前致謝。

順便說一句：是否有可能在CKEditor的插件中使用jquery？

這是解決方案：

所以最后我要想出什么，這要歸功於這里的所有幫助。 在對話框部分：

onShow : function()
{
elem = this.getParentEditor().getSelection().getSelectedElement();
var span = elem.getNext();
var parent = span.getParent();
}

再次打開對話框后，這將為我提供我需要填寫的所有內容。

提交我需要的所有內容，以了解如何更改當前選擇。 這是這樣的：

onOk:
function()
    {
editor.getSelection().selectElement(editor.getSelection().getSelectedElement().getParent());
editor.insertHtml('<div ...</div>');
}

謝謝大家，我今天才開始研究CKEditor插件，已經有了兩個不錯的插件。

Answer 1

通過CKEditor API，您可以使用.getNext（）

Answer 2

是的，只要您不打算分發插件（其他人可能沒有jQuery），就可以在CKEditor插件中使用jQuery，在這種情況下，您的解決方案將變為：

$(elem).next('span')和$(elem).prev('div')

如果您不想使用jQuery，則可以使用.nextSibling和.previousSibling

但是請注意，下一個和上一個兄弟姐妹通常是textNode，具體取決於您所使用的瀏覽器。因此，要獲取跨度，您需要一個循環：

function getNextSibling(node, type){
    while((node = node.nextSibling) && (node.nodeName != type));
    return node;
}

getNextSibling(elem, 'SPAN');

Answer 3

有Element.nextElementSibling，在IE9 +，Fx3.5 +，Op，Saf和Chrome（最近三個版本中都是Dunno版本，但有相當長的一段時間）中受支持。