reformating an RSS feed with jQuery

Question

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!

Answer 1

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.

Answer 2

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.