Example:
$('#topNavigation li a').map(function(){
// find STRONG element...
var b = $(this).find('strong');
// return STRONG element or this (an A)...
return b.length ? b[0] : this;
})
// for each A or STRONG found...
.each(function(){
// get the text...
var me = $(this), txt = me.text();
// replace the text with constructed html...
me.html( [ '<img src="/images/topNav'
, txt
, '.gif" alt="'
, txt
, '" />'
].join('') );
});
On Nov 15, 9:53 pm, "Andy Matthews" <[EMAIL PROTECTED]> wrote:
> Why would you want to keep the bold tag if it's just going to be wrapped
> around an image?
>
> -----Original Message-----
> From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
>
> Behalf Of desmond
> Sent: Thursday, November 15, 2007 1:00 PM
> To: jQuery (English)
> Subject: [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
> herehttp://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
