how to avoid hardcoded calls and attain same results on divs with same classname

this is in html file.

<div class="pageNavPosition"></div>
<table></table>
<div class="pageNavPosition"></div>
<script>
showPageNave('pager','pageNavPosition');
</script>

this code in js file.

    this.showPageNav = function(pagerName, divname) {
    var pagerHtml = ['<a href="#" class="prev" onclick="' + pagerName + '.prev();"> &lt Prev </a> '];
    for (var page = 1; page <= this.pages; page++){
          pagerHtml.push('<a href="#" class="'+ page +'"onclick="' + pagerName + '.showPage(' + page + ');">' + page + '</a>  '); 
    }
    pagerHtml.push('<a href="#" class="next" onclick="'+pagerName+'.next();"> Next &gt;</a>');                  
    $("."+divname).append(pagerHtml.join(""));     
    if(this.pages > 9){
          $(".pageNavPosition a:lt(" + this.endMask + "):gt("+this.buffer+")") .css("displ开发者_JS百科ay","none").hide();                                
          $('<a class="dotline" >.....</a>').insertAfter($(".pageNavPosition a:eq(" + Math.ceil(this.pages/2) + ")"));                                                           
     }                                       
} 

what i wanted to do is 1,2,.....,9,10 both at the top and bottom of the table. This working fine for div above table but not the div at the bottom.i tried using $("."+divname instead of (hardcoded)$(".pageNavPosition , and with .each() but i was not successful. any ideas are most welcome.

I tried it in a jsfiddle: http://www.jsfiddle.net/jeXBh/

it works in both divs for me. (I also simplified the code a bit. I think it's better to create the dots in the loop already instead of changing the html afterwards.)

May be you've to close the div tag?

  $(document).ready(function(){
    $(".page").html("My html code");
  });    

<div class="page"> </div>
   <div class="MyContent">
bla bla bla
 </div>
   <div class="page"> </div>

each should work for you.... but I think your may be getting some scoping issues, try:

if(this.pages > 9){
    var that = this;
    $("." + divname).each(function() {
        var initial = $(this).find("a:eq(" + Math.ceil(that.pages/2) + ")");
        $(this).find("a:lt(" + that.endMask + "):gt("+that.buffer+")")
            .hide();
        $('<a class="dotline" >.....</a>')
            .insertAfter(initial); 
    });
 }

in any case, this approach seems to me a bit convoluted, you may try an approach like the one andy mentions...