Reputation: 225
I am currently pulling an RSS feed in which the the format is essentially title->image->text content. I would like to reformat it so that the image comes first. I am currently trying:
<script type="text/javascript">
$(document).ready(function() {
$("li.rssitem").each(function() {
$(".rssdescription a img").remove().insertBefore("h3");
});
});
</script>
HTML looks like:
<ul id="rssitems">
<li class="rssitem"><h3 class="rsstitle"></h3>
<div class="rssdescription"><p><a href="#"><img src="..."></a></p><p>content</p></div></li>
<li class="rssitem"><h3 class="rsstitle">><a href="#">...</a></h3>
<div class="rssdescription"><p><a href="#"><img src="..."></a></p><p>content</p></div></li>
</ul>
Which works except that there are many items (all with images) in the list. This code puts ALL the images before all the h3's. I am clearly having trouble looping correctly. Thanks so much guys!
Upvotes: 1
Views: 201
Reputation: 26607
Try this code :
$("li.rssitem").each(function() {
var target = $(this).children("h3");
$(this).find("img").each(function() {
$(this).remove();
$(target).before($(this));
});
});
I didn't tested it, so I'm not sure it will work out of the box, but hopefully you'll be able to modify it to suits your needs.
Upvotes: 0
Reputation: 2995
The issue is the selector that is inside of the loop. It's finding all of the img tags, and not just the one inside of the desired li.rssitem.
<script type="text/javascript">
$(document).ready(function() {
$("li.rssitem").each(function() {
$(this).find(".rssdescription a img").insertBefore("h3");
});
});
</script>
Let me know if this solves the issue that you're having.
UPDATE: Got rid of the remove() as it's gonna screw with ya. Thanks DT.
Upvotes: 1