how to display the parent and child alternatively using with jquery?

I have list with parent and children.

Title1
 child1
 child2
 child3
Title2
 c开发者_开发问答hild1
 child2
 child3

i want to print the parent and children as like this

title1_child1
title1_child2
title1_child3
title2_child1
title2_child2
title3_child2

thanks in advance

Assuming you have the below layout you can try this

<ul>
  <li><span>Title1</span>
     <ul>
        <li>Child1</li>
        <li>Child2</li>
        <li>Child3</li>
     </ul>
  </li>
  <li><span>Title1</span>
     <ul>
        <li>Child1</li>
        <li>Child2</li>
        <li>Child3</li>
     </ul>
  </li>
</ul>
<div class="output"></div>

$(function(){
  var parent, str = "", $this;
  $("ul:first li").each(function(){
    $this = $(this);
    parent = $this.find("span").text();
    str = "";
    $this.find("li").each(function(){
      str = str + parent + "_" + $(this).text() + "<br />";
    });
    $(".output").html(str);
  });
});

var string="";
$(".title childTag").each(function(){
  string += $(this).closest(".title").html() + "_" + $(this).html();
})

Something like that