[jQuery] Re: Find text in a list item, remove it and replace with an image tag.
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=homea
href=/index.phpstrongHome/strong/a/li
li class=developmenta href=/front-end-
development.phpDevelopment/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=homea href=/index.phpstrongimg
src=/images/ topNavHome.gif alt=Home//strong/a/li
li class=developmenta
href=/front-end-development.phpimg
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
[jQuery] Re: Find text in a list item, remove it and replace with an image tag.
Sorry to take so long to get back Andy. I want to keep the strong tag is it depicts a selected state on the navigation. Basically, the image is positioned absolutely in the LI, the LI has a fixed height which is half that of the image. If there is a strong tag around the image, it shifts up 50%, showing a selected state. I hope that makes sense, that's why I would only want it sometimes. If you want me to post more code up, let me know. Thanks On 15/11/2007, 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=homea href=/index.phpstrongHome/strong/a/li li class=developmenta href=/front-end- development.phpDevelopment/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=homea href=/index.phpstrongimg src=/images/ topNavHome.gif alt=Home//strong/a/li li class=developmenta href=/front-end-development.phpimg 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
[jQuery] Re: Find text in a list item, remove it and replace with an image tag.
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=homea href=/index.phpstrongHome/strong/a/li li class=developmenta href=/front-end- development.phpDevelopment/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=homea href=/index.phpstrongimg src=/images/ topNavHome.gif alt=Home//strong/a/li li class=developmenta href=/front-end-development.phpimg 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
