I have a jquery headline like this:

<div class="mainGallery">
  <div class="main">
    <div class="mainDesc">
      <h2> </h2>
      <a class="mainA" href="#"> </a> </div>
    <ul class="pg">
      <li> 1 <a href="#" rel="Headline Title 1"></a> <span rel="Headline Lorem1 ipsum dolor sit amet"></span>
        <p rel="images/1.jpg"></p>
      </li>
      <li> 2 <a href="#" rel="Headline Title 2"></a> <span rel="Headline Lorem ipsum2 dolor sit amet"></span>
        <p rel="images/2.jpg"></p>
      </li>
      <li> 3 <a href="#" rel="Headline Title 3"></a> <span rel="Headline Lorem ipsum3 dolor sit amet"></span>
        <p rel="images/3.jpg"></p>
      </li>
      <li> 4 <a href="#" rel="Headline Title 4"></a> <span rel="Headline Lorem ipsum4 dolor sit amet"></span>
        <p rel="images/4.jpg"></p>
      </li>
    </ul>
  </div>
  <div class="mainImg"><img src=""/></div>
</div>

My jquery is:

$(document).ready(function(){
$('.pg li').click(function(){
    var header      = $(this).find('a').attr('rel');
    var desc        = $(this).find('span').attr('rel');
    var images      = $(this).find('p').attr('rel');
    $(".mainDesc h2").text(header);
    $(".mainDesc a").text(desc);
    $(".mainImg img").attr("src", images);
   }
);
 }

);

Everything is ok, But when refreshing the page, the first item is missed. I want insert only one mysql query in this section. How can I fix this for showing first item when page refreshed. Thanks