[jQuery] Find text in a list item, remove it and replace with an image tag.
Hi all,
I am a bit stuck here, I've been looking around, but can't seem to
find what I'm after. I am fairly new to Jquery and Javascript, so not
sure exactly what to look for. Basically I have the following HTML:
<div id="topNavigation">
<ul class="firstLevel">
<li class="home"><a href="/index.php"><strong>Home</strong></a></li>
<li class="development"><a href="/front-end-
development.php">Development</a></li>
</ul>
</div>
I want to use Jquery to go through each list item, delete the text
inside the href (not the strong tag though, if there is one), then add
an image tag in it's place (whilst retaining the strong tag around the
image if it's there). So the generated code would look like this:
<div id="topNavigation">
<ul class="firstLevel">
<li class="home"><a href="/index.php"><strong><img src="/images/
topNavHome.gif" alt="Home"/></strong></a></li>
<li class="development"><a href="/front-end-development.php"><img
src="/images/topNavDevelopment.gif" alt="Development"/></a></li>
</ul>
</div>
Now, I'm not sure if we can come up with a clever loop that uses the
text to create the image name and alt tag? There are only 5 fixed
links in the full version, so I can do manually if need be.
I've been trying to use the wrap/prepend/append methods described here
http://docs.jquery.com/Tutorials:Rounded_Corners, but really I need to
strip the text and replace it with the image tag. Also, there is a
strong tag inside the HREF sometimes to show a selected link. I need
to keep that there and have the image tag inside it.
I don't expect anyone to write the code for me, but if you can just
send me some links or point me in the direction of tutorials where I
can learn from, that would be great.
Thanks
Paul