Adding li tags using javascript

Question

Hi I have a problem I have a code example code below:

<div class="fadein">   
<img src="banner1.jpg" width="645" height="300"/>text 1  
<img src="banner2.jpg" width="645" height="300"/>text 2   
<img src="banner3.jpg" width="645" height="300"/>text 3 
<img src="banner3.jpg" width="645" height="300"/>text 4 
</div>

which is rendered by a php script is there any way I could add li/li on each image and text using javascript ex.

<li><img src="banner1.jpg" width="645" height="300"/>text 1</li>  
<li><img src="banner2.jpg" width="645" height="300"/>text 2</li>

I am trying to use simple jquery slideshow on it but the text won't join the image when fading in and fading out, may be with the li I could use another slide show effect

any idea thanks.

I have no control/idea on the php.

Guys heres the source code for your script

 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Untitled Document</title>
 <script   src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js">
 </script>
 <script type="text/javascript"> 
 $(document).ready(function() { var i = 0,     
 imgTxt = $('.fadein').text().trim      ().split('\n'),     
 wrapedImgs =    $('.fadein').children().map(function() {         
 var tmp = '<img   src="' + this.src + '" width="' + this.width + '" 
 height="' + this.height + '" />' + imgTxt[i];         i += 1;         return   
 tmp;     }).get().join('</li><li>');  $('.fadein').html('<ul><li>' + wrapedImgs 
 + '</li></ul>'); }); 
 </script>
</head>

<body>
<div class="fadein">    <img src="banner1.jpg" width="645" height="300"/>text 1   
<img src="banner2.jpg" width="645" height="300"/>text 2    <img src="banner3.jpg"   
width="645" height="300"/>text 3  <img src="banner3.jpg" width="645"  
 height="300"/>text 4   </div> 
</body>
</html>

Should you wrap your <img> tags with the rest of your <a> tag? That is, you have a closing anchor tag after your text, but there is no opening anchor tag. — Lance
– Lance, Commented Jan 20, 2011 at 18:49
sorry about that something is wierd with my editor I have edited mypost <ul> I guess wouldnet be an issue I just need to know how I could add li and /li on each image and text. — Luke
– Luke, Commented Jan 20, 2011 at 18:53

Amjad Masad · Accepted Answer · 2011-01-20 20:14:11Z

1

If your already using jQuery you could use the .wrapAll() to wrap the images and .content() to get all elements including text, and then place it inside the previously made li:

elems = $('.fadein').contents();
for ( i=0 ; i<elems.length;i++){
    if (elems[i] instanceof Text && elems[i-1] instanceof HTMLImageElement) 
        $(elems[i-1]).after($(elems[i])); 
    else if 
        (elems[i] instanceof HTMLImageElement) $(elems[i]).wrapAll('<li>');
}

EDIT JSFiddle example, even though you should use ul , but here is what you asked for

edited Jan 20, 2011 at 20:14

answered Jan 20, 2011 at 20:01

Amjad Masad

4,0451 gold badge23 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Luke Over a year ago

Thank you for your help for some reason it's not working it just show with your code ex.<script type="text/javascript"> elems = $('.fadein').contents in the source code but wrapping the images I think it's with php script conflicting with your script

Luke Over a year ago

I made a new document and inserted my example code and inserted your code <script type="text/javascript"> $(document).ready(function() { elems = $('.fadein').contents(); .....</script> but it does not change my ex. code so it might no be the script any idea. thanks.

Amjad Masad Over a year ago

be sure your including jQuery before running the script, and if your using firefox, download firebug and try to find out if there is any javascript error when you open up the console!! You can do that with chrome inspector too. If there is any it will lead you to the line causing the problem.

skålfyfan · Accepted Answer · 2011-01-20 19:04:24Z

0

You can do this with jQuery. Start reading here: http://api.jquery.com/category/selectors/

You'll use a selector to grab the div container with the class fadein (it's the only one on the page right?) and from that you then should be able to further wrap li tags around your images/text within that container.

You'll want to do all this coding in a

$(document).ready(function(){ 
  // Your code here
});

function which ensures the the code and manipulation is performed after the document has been loaded but before it has been rendered.

Someone else can provide a full code example :)

EDIT: Also assuming here that you already have jQuery loaded since you're using a jQuery slideshow.

answered Jan 20, 2011 at 19:04

skålfyfan

5,4015 gold badges43 silver badges63 bronze badges

1 Comment

Luke Over a year ago

Thanks for your reply but All I can see is how you could select elements. I wasn't able to see any concerning my problem (I think).

Lance · Accepted Answer · 2011-01-20 20:03:55Z

0

Here's how I would do it

$(document).ready(function() {
var i = 0,
    imgTxt = $('.fadein').text().trim().split('\n'),
    wrapedImgs = $('.fadein').children().map(function() {
        var tmp = '<img src="' + this.src + '" width="' + this.width + '" height="' + this.height + '" />' + imgTxt[i];
        i += 1;
        return tmp;
    }).get().join('</li><li>');

$('.fadein').html('<ul><li>' + wrapedImgs + '</li></ul>');
});

A jsfiddle example can be found here.

Hope this helps!

answered Jan 20, 2011 at 20:03

Lance

1,89714 silver badges13 bronze badges

2 Comments

Luke Over a year ago

Thank you also for your help but it's not working If you have any more ideas it would really be helpful but I guess the php script is messing up your codes.

Luke Over a year ago

I made a html new document and inserted my example code and inserted your code like with Amjad with jquery but it didn't change it.

Collectives™ on Stack Overflow

Adding li tags using javascript

3 Answers 3

3 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related