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>
3 answers
solution1
1 2011-01-20 20:01:22
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
solution2
0 2011-01-20 19:04:24
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.
solution3
0 2011-01-20 20:03:55
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!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.