工具提示庫正在複製dom節點以在工具提示中插入html。使用jQuery定位正確的元素
我需要定位工具提示中的元素,但javascript總是應用於原始元素。
<a class="tooltip">Open</a>
<div class="tooltip-html" style="display:none;">
<div id="main-content" class="scroll">
<div class="Content">
<div class="blue">
</div>
</div>
</div>
我已經使用輸入提示的回調試過了,這是行不通的。並且在工具提示覆制html之前應用的東西只能在美觀上起作用,JavaScript仍在查看原始內容。我甚至在我再申請javascript之前嘗試更改該類。想象一下,如果我改變了類,原始元素將不再可訪問。該類改變了,但JavaScript並沒有應用到工具提示中。
有沒有一種很好的方法,一旦它被複制,或更好的方法找到/定位正確的元素刪除一個div。
$(this).find("div.scroll").test();
編輯:
...Before...
<div id="main-content" class="scroll">
<div class="Content">
...After...
<div id="tiptip_holder" style="max-width: 230px; margin: 23px 0pt 0pt 999px; display: none;" class="tip_left_bottom">
<div id="tiptip_arrow" style="margin-left: 220px; margin-top: -12px;">
<div id="tiptip_content">
<div id="main-content" class="scroll">
<div class="Content">
....
的這個是爲提示庫進入回調的一部分:
var tip_html = $('.tooltip-html').html();
$('.tooltip').tipTip({ content: tip_html, enter: function(){
$(this).find("div.scroll").test();
}
使用,也試過
$("#main-content.scroll", "#tiptip_content").test();
更新:
正如人們提到命名的父div像我應該的工作,這裏是一個例子,我不能夠在工具提示內定位。
jsfiddle.net/mstefanko/pUm5V/24
//$("#main-content", "#tooltip-content").css("background", "red");
$("#main-content", "#tiptip_content").css("background", "blue");
藍不起作用,紅色呢。我覺得兩條線都可以工作。
你的示例代碼中的「this」是什麼?另外,你有沒有看過DOM,看看複製後的樣子,用firebug或類似的東西來確保html沒有被修改? – 2012-04-23 15:22:14
用這些答案編輯了問題,還有額外的div封裝了html,但是html沒有以任何方式修改。 – mstef 2012-04-23 15:47:32
當您使用'$(this)'時,您指的是裝箱功能的選定元素。在上面的例子中'$(this)'會引用'$('。tooltip')'。不知道爲什麼'(「#main-content.scroll」,「#tiptip_content」)。test();'不適合你。我製作了一個[Fiddle](http://jsfiddle.net/pUm5V/7/)來測試選擇,它似乎與您發佈的HTML一起工作。 – jasonmerino 2012-04-23 16:32:32