My jquery headline and PHP query

Question

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 to insert only one mysql query in mainDesc. I want to first item will be shown with jquery not mysql query. How can I fix this for showing first item when page refreshed. Thanks

Answer 1

You can simulate a click on one of the lis after binding the onClick event, so the content is shown when the page is loaded. Add this after binding the click event

$(".pg li:first").click();

This will fire the onClick event on the first li element.

To make it faster you should also cache the li elements so yo don't have to look them up twice. The javascript would then look like this

$(document).ready(function() {

    $lis = $(".pg li");
    $lis.click(function(){
        var $li = $(this);
        var $mainDesc = $(".mainDesc");

        var header      = $("a", $li).attr("rel");
        var desc        = $("span", $li).attr("rel");
        var images      = $("p", $li).attr("rel");

        $("h2", $mainDesc).html(header);
        $("a", $mainDesc).html(desc);
        $(".mainImg img").attr("src", images);
    });
    $lis.eq(0).click();

});

It also seems to me like you could switch from using "mainDesc" as a class to an ID, since it seems like there's only one mainDesc on the page.

---

You're also missing an ending </div> tag at the end of you HTML.