jQuery的改變HTML結構動態

我有一個HTML結構類似 -jQuery的改變HTML結構動態

<div class="fullcalendar-event"> 
<h3 class="title"><a href="isv-events/test-event">Test Event</a></h3>

現在我想在頁面加載此HTML改爲

<div class="fullcalendar-event"> 
<span class="qtip-link"> 
<span class="qtip-tooltip"> 
Header to appear in tooltip 
</span> 
<h3 class="title"> 
<a href="/saasmax/trunk/isv-events/test-event">Text to appear in tooltip</a></h3> 
</span>

任何想法，關於什麼jQuery的功能，我應該使用並解決這個問題？

編輯問題

完整的數據爲以下格式 -

<div class="fullcalendar-event"> 
     <h3 class="title"><a href="/saasmax/trunk/isv-events/test-event">Test Event</a></h3> 
     <div class="fullcalendar-instance"> 
     <a href="/saasmax/trunk/isv-events/test-event" field="field_e_date" allDay="1" start="2011-04-25" end="2011-04-25" index="0" eid="184" entity_type="node" cn="fc-event-default isv_events node-type-isv_events" title="Test Event" class="fullcalendar-event-details" editable=""><span class="date-display-single">Mon, 04/25/2011</span></a> </div> 
    </div>

所以如果你看到我想設置第一錨標籤（這是div裏面的qtip的fullcalender。

所有我需要需要的數據是

頁眉出現在工具提示小號應該是div fullcalendar-instance中的錨點的標題。

的文字出現在工具提示可以在錨標籤的鏈接。（這是相同的兩個div的）

來源

2011-04-26 ayush

你從哪裏得到數據？我的意思是新元素的數據。它是不變的？ – kapa 2011-04-26 06:18:09

新數據的內容是動態的..我會編輯我的問題，告訴你需要提取的確切數據。 – ayush 2011-04-26 06:54:56

首先嚐試我在我的答案中給出的代碼。嘗試將其改爲您的特定需求。如果您仍然有問題，我很樂意提供幫助。 – kapa 2011-04-26 07:01:28

我已經按照你的更新編輯我的答案。我不是說我完全理解你，但是這個代碼應該能夠完成這項工作。

$(document).ready(function() { 
    //access to whole div 
    var $fe=$('.fullcalendar-event'); 
    //access to H3 
    var $fe_title=$('h3.title', $fe); 
    //creating qtip-tooltip SPAN 
    var $tooltip_span=$('<span class="qtip-tooltip" />') 
          .text($('.fullcalendar-instance a', $fe).attr('title')); 
    //wrapping H3 in SPAN and adding tooltip before it 
    $fe_title 
     .wrap('<span class="qtip-link" />') 
     .before($tooltip_span); 

    /* I am unsure if you want to change HREF, uncomment if yes 
    //access to the link in the H3 
    var $fe_title_link=$('a', $fe_title); 
    //creating new HREF 
    var newhref='/saasmax/trunk/'+$fe_title_link.attr('href'); 
    //setting HREF for link 
    $fe_title_link.attr('href', newhref); 
    */ 
});

我還創建了一個jsFiddle，所以你可以看到它的發生，並在必要時調整它。

來源

2011-04-26 06:23:36 kapa

你可以看看編輯過的問題，並建議如何動態設置標題和數據。 – ayush 2011-04-26 07:01:13

@ayush請嘗試它，如果需要，澄清你想要什麼。 – kapa 2011-04-26 07:24:45

jQuery的改變HTML結構動態

回答

相關問題