Question

我有一个像

这样的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>

所以如果你看到我想在第一个锚标签上设置qtip（在div fullcalender里面。

我需要的所有数据都是

出现在工具提示中的标题应该是div fullcalendar-instance中锚点的标题。

工具提示中显示的文本可以是锚标记中的链接。（在两个div中都是相同的）

Answer 1

我根据您的更新编辑了我的答案。我不是说我完全理解你，但这段代码应该可以胜任。

$(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，因此您可以看到它发生并在必要时进行调整。

Jquery动态更改html结构

1 个答案: