Q:

dom traversing with Jquery

Ok I am trying to parse xml that is being imported via a curl script into a html page, i have my curl working fine it returns my xml like so: 
<item> 
<title> TITLE ONE</title>
<description> desc one</description>
<guid>http://example.com</guid>
</item>
<item> 
<title> TITLE two</title>
<description> desc two</description>
<guid>http://exampletwo.com</guid>
</item> 

after the onpage xml appears i'm trying to convert it to html and append it to another div like so: 
//Convert onpage feed to html//
var title= jQuery('#results item > title');
var titletext = jQuery("#results item > title").text()

var description = jQuery('#results item > description');
var descriptiontext = jQuery("#results item > description").text()

var guid = jQuery('#results item > salaryrange guid');
var guidtext = jQuery("#results item > salaryrange guid").text()

var rss = jQuery('#results item');
var rsstext = jQuery("#results item").text()

jQuery(title, this).replaceWith('<h1>'+titletext+': </h1/>')
jQuery(description, this).replaceWith('<p class="feed_desc">'+descriptiontext+': </p>')

// move to new div stripping unwanted xml//
var title= jQuery('#results_two .rssfeed > title');
var titletext = jQuery("#results_two .rssfeed > title").text()

var description = jQuery('#results_two .rssfeed > description');
var descriptiontext = jQuery("#results_two .rssfeed > description").text()

var guid = jQuery('#results_two .rssfeed > salaryrange guid');
var guidtext = jQuery("#results_two .rssfeed > salaryrange guid").text()

var rss = jQuery('#results item');
var rsstext = jQuery("#results item").html()

title.replaceWith('<a href='+guidtext+' class="feedh1">'+titletext+': </a><br/>')

description.replaceWith('<p class="feed_desc">'+descriptiontext+': </p>')

rss.replaceWith('<div class="rssfeed">'+rsstext+': </div>')

jQuery("#results_two").append('<div class="rssfeed">'+rsstext+': </div>');
//empty old div//
jQuery("#results").empty();
//remove left over xml//
 jQuery('.rssfeed > location, .rssfeed > salaryrange').remove();

 //strip empty <p> tags //
 jQuery('p').each(function() {
    var $this = jQuery(this);
    if($this.html().replace(/\s|&nbsp;/g, '').length == 0)
        $this.remove();
});

Which works great as long as there is only one item in the feed when the items increase beyond one the titles just get applied to the first or last items in the feed.
how do i go about applying the append only to one item at a time? 
here is a simplified version using just the title: 
   var title= jQuery('#results item > title');
    var titletext = jQuery("#results item > title").text()

    title.replaceWith('<h1>'+titletext+': </h1>')

Chris

A:

You could do it like this... http://jsfiddle.net/yMLUp/
$("item").each( function() {
    $title = $(this).children("title");
    $title.replaceWith("<h1>"+$title.text()+"</h1>");
    //change other elements in the same manner
});

You can change it to your context, #results item... and you can either replaceWith inside of that and then append it wherever you want or just append the new stuff to a new element as you parse.
Here is a jsfiddle parsing all your elements: http://jsfiddle.net/yMLUp/1/

