How to change child text using jquery dynamically
<p>I'm using jquery mouseenter/leave to try to change the (currently-hovered-over) TEXT inside a container without changing any other child elements. </p>

<p>I'm using this on top of a live 3rd party website - this means I have no control over the HTML code, which gives me the following issues:</p>

<ul>
<li>I don't know how many child elements are in the parent container</li>
<li>the HTML tags (both parent and children) could be anything from LI, to IMG, to A, to SPAN, to H1, etc</li>
<li>the position of the text I need to change will vary from 1st to last
and anything in-between</li>
</ul>

<p>I've tried the following (nameX and indexX are used to identify the current element - I can't use 'this' on it's own as I need to use the actual values elsewhere):</p>

<pre><code>$("a,img,p").mouseenter(function (event) {
   nameX = this.tagName;
   indexX = $(nameX).index(this);
   $(''+nameX+':eq('+indexX+')').text("hello");
});

&lt;ul&gt;
  &lt;li&gt;
     &lt;a href=""&gt;bullet 1  
        &lt;img src="http://bit.ly/ZqJ1DL"  width="229" height="129"/&gt;
     &lt;/a&gt;&lt;br&gt;  
     &lt;a href=""&gt;bullet 2  
     &lt;/a&gt;&lt;br&gt;  
     &lt;a href=""&gt;bullet 3
     &lt;/a&gt;&lt;br&gt;
     general text
  &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>When I use the above - it DOES work when hovering over bullet 2 or bullet 3. </p>

<p>However, it does NOT work with bullet 1 - here the JS replaces ALL contents of the parent, including the image - I only want it to replace the TEXT and leave the image (and any other children) alone, regardless of the position of the the text.</p>

<p>See example <a href="http://jsfiddle.net/stevepitman/esauq/1/" rel="nofollow">FIDDLE HERE</a></p>

<p>[EDIT: the above HTML is example code - it could be anything as it will be the code of the 3rd party website I'm hovering over - please therefore comment on the JQuery code only - thanks, Steve]</p>
