Any help would be much appreciated, I've got a glossary function that I need to extend.

Currently I add terms and definitions to a div inside my html page. The jQuery function  retrieves these as $term and $definition. It then loops through a named ID of a content div to match any instance of my terms and then replace the html to show a tool tip with Term and definition.

 

What I'd really like to achieve is to find the only the first instance of my 'term' in the content div and apply the tip to that first instance only.

 

Thanks in advance if someone can help.

 

I'm using

 

jquery-1.3.2.min.js

jquery-ui-1.7.2.custom.min.js

jquery.tooltip.js

 

// Checks the page for a glossary pod - jGlossary - if there, looks in page and adds tooltips to all words that match
function checkGlossary() {
 if ($('div.jGlossary').length != 0) {
  $term = $('div.jGlossary h4');
  $definition = $('div.jGlossary p');
  
  $term.each(function(index, value) {

   $currentTerm = $(this).html();
   $currentIndex = $('div.jGlossary h4').index($(this));
   $currentDefinition = $definition.eq($currentIndex).html();
   
   /* sets where to search for terms to match - add in not's to deselect things like <a> or titles if required */
   $content = $('#content').html();
   
   
   var strExp = new RegExp($currentTerm, "g");

  
   $content = $content.replace(strExp, '<span class="jGlossaryTerm" title="' + $currentTerm + ' - ' + $currentDefinition +'">' +$currentTerm+ '</span>');
   
   $('#content').html($content);
   
  });
 }

 /* turns on the tooltip functionality */
 $('span.jGlossaryTerm').tooltip({
  showBody: " - ",
  left:-92,
  top:-60
 });
 
 $('div.jGlossary').hide();
}

 

HTML

 

<div id="content">      
     <h1>tincidunt</h1>
     <h2>Summary</h2>
     <p class="summaryText">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.</p>
     <p class="summaryText">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto. </p>   
     <h2>Lorem ipsum dolor sit amet</h2>
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
     <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
     <a href="" class="anchor">Back to top</a>
</div>

 

 

Glossary terms div snippet

 

    <!-- Start of sideBoxWrap -->
    <div class="sideBoxWrap openBox jGlossary">
     <h3>In-page Glossary</h3>
     
     <div class="contentBox">
      <ul class="arrowList">
       <li>
        <h4>tincidunt</h4>
         <p>First definition</p>
       </li>
       <li>
        <h4>dignissim</h4>
         <p>Second definition</p>
       </li>
       <li>
        <h4>nulla</h4>
        <p>third term</p>
       </li>
       <li>
        <h4>Lorem</h4>
        <p>abcd</p>
       </li>
      </ul>
     </div>
    </div><!-- End of sideBoxWrap -->