Repeat function every id named "" with jquery

Question

Ok i have this function what it does is takes the value of id time, user, title, and bodytext.

Function to insert into sql.

function getblogpost() {

    var date = $('#time').text();
    var user = $('#user').text();
    var title = $('#title').text();
    var textbody = $('#bodytext').text();
    var postid = $('#pid').text();
    dbsql.transaction(
        function(transaction) {
            transaction.executeSql(
                'INSERT INTO blogpost (postid, date, user, title, textbody) VALUES (?, ?, ?, ?, ?);', 
                [postid, date, user, title, textbody], 
                function(){

                }, 
                errorHandler
            );
        }
    );

    return false;

}

And this would be the html that the above function works with.

<div id="main">
<div id="time">some text..</div>
<div id="user">some text..</div>
<div id="title">some text..</div>
<div id="bodytext">some text..</div>
<div id="pid">some text..</div>
</div>

<div id="main">
<div id="time">some text..</div>
<div id="user">some text..</div>
<div id="title">some text..</div>
<div id="bodytext">some text..</div>
<div id="pid">some text..</div>
</div>

<div id="main">
<div id="time">some text..</div>
<div id="user">some text..</div>
<div id="title">some text..</div>
<div id="bodytext">some text..</div>
<div id="pid">some text..</div>
</div>

The problem im having is that i dont know how to repeat one function for every div named main. Right now it only does it for the first main div but does now move onto the next main div.

What could be the best way to do this?

Answer 1

You can't duplicate id's like that: it makes your HTML document invalid and will cause you nothing but problems.

You'll need to use iteration. Name each div id main1, main2, etc... Then you can collect all of the data you need.

Answer 2

Instead of ids, use classes.

$('.main').each(function(){ 
   //do something with $(this)
});

Answer 3

First off you can't have more than 1 element with a single id. You need to uses classes.

the html can look like this:

<div class="main">
  <div class="time">some text..</div>
  <div class="user">some text..</div>
  <div class="title">some text..</div>
  <div class="bodytext">some text..</div>
  <div class="pid">some text..</div>
</div>

and the code like this:

 function getblogpost(div) {

    var date = $(div).find('.time').text();
    var user = $(div).find('.user').text();
    var title = $(div).find('.title').text();
    var textbody = $(div).find('.bodytext').text();
    var postid = $(div).find('.pid').text();
    dbsql.transaction(
        function(transaction) {
            transaction.executeSql(
                'INSERT INTO blogpost (postid, date, user, title, textbody) VALUES (?, ?, ?, ?, ?);', 
                [postid, date, user, title, textbody], 
                function(){

                }, 
                errorHandler
            );
        }
    );

    return false;

}

then call it like this:

$('.main').each(function(){ 
  getblogpost(this);
});