Looping through List elements in order to build an array to pass out in AJAX request

I want to pass a bunch of data out to my server.

So i have a bunch of Lists like so:

<ul id="myList">
<li><span class="firstData">10</span><span id="secondData">banana</span></li>
<li><span class="firstData">20</span><span id="secondData">grapefruit</span></li>
<li><span class="firstData">30</span><span id="secondData">apple</span></li>
<li><span class="firstData">40</span><span id="secondData">pear</span></li>
<ul>

I want to loop through the list and create data in the form 'firstDataValue_secondDataValue' so i can build up a string to pass out in my POST ajax request.

something like value=10_banana&value=20_grapefruit开发者_运维技巧&amp and so on.

How best can i loop through the elements in order to create the string of data i'm looking for.

Thanks in advance.

$('ul#myList li').each(function(){
//do what you want here
   var number = $(this).find('span:first-child').text();
   var fruit = $(this).find('span:first-last').text();
//now you have both values do whatever you want with it
});

that will loop for every li element

This should build up the string formatted the way you requested based on HTML you provided but changing id to class as suggested in comments to the question: Working example

var str = '';
$('ul#myList li').each(function(){
    var spans = $(this).find('span');
    str += 'value='+spans[0].innerHTML+'_'+spans[1].innerHTML+'&';
});