Adding CSS to a tag in javascript

[stephen_]

I'm trying to add more complex CSS to jquery paginate links I intent to use, I've tried adding different classes to the javascript yet nothing works.

The whole code is;

<style>
        
a   {
float: left;
  padding: 0 14px;
  line-height: 34px;
  text-decoration: none;
  border: 1px solid #ddd;
  border-left-width: 0;
}
</style>
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>

 
<input type='hidden' id='current_page' />  
<input type='hidden' id='show_per_page' />  
   
<div id='content'>  
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>  
    <li>Vestibulum consectetur ipsum sit amet urna euismod imperdiet aliquam urna laoreet.</li>  
    <li>Curabitur a ipsum ut elit porttitor egestas non vitae libero.</li>  
    <li>Pellentesque ac sem ac sem tincidunt euismod.</li>  
    <li>Duis hendrerit purus vitae nibh tincidunt bibendum.</li>  
    <li>Nullam in nisi sit amet velit placerat laoreet.</li>  
    <li>Vestibulum posuere ligula non dolor semper vel facilisis orci ultrices.</li>  
    <li>Donec tincidunt lorem et dolor fringilla ut bibendum lacus fringilla.</li>  
    <li>In non eros eu lacus vestibulum sodales.</li>  
    <li>Duis ultrices metus sit amet sem adipiscing sit amet blandit orci convallis.</li>  
    <li>Proin ullamcorper est vitae lorem mollis bibendum.</li>  
    <li>Maecenas congue fringilla enim, tristique laoreet tortor adipiscing eget.</li>  
    <li>Duis imperdiet metus et lorem venenatis nec porta libero porttitor.</li>  
    <li>Maecenas lacinia lectus ac nulla commodo lacinia.</li>  
    <li>Maecenas quis massa nisl, sed aliquet tortor.</li>  
    <li>Quisque porttitor tellus ut ligula mattis luctus.</li>  
    <li>In at mi dolor, at consectetur risus.</li>  
    <li>Etiam id erat ut lorem fringilla dictum.</li>  
    <li>Curabitur sagittis dolor ac nisi interdum sed posuere tellus commodo.</li>  
    <li>Pellentesque quis magna vitae quam malesuada aliquet.</li>  
</div>  
  

<div id='page_navigation'></div>  
<script type="text/javascript">
$(document).ready(function(){  
  
    var show_per_page = 2;  
    var number_of_items = $('#content').children().size();  
    var number_of_pages = Math.ceil(number_of_items/show_per_page);  
  
    $('#current_page').val(0);  
    $('#show_per_page').val(show_per_page);  
    
    var navigation_html = '<a class="previous_link" href="javascript:previous();">Prev</a>';  
    var current_link = 0;  
    while(number_of_pages > current_link){  
        navigation_html += '<a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';  
        current_link++;  
    }  
    navigation_html += '<a class="next_link" href="javascript:next();">Next</a>';  
  
    $('#page_navigation').html(navigation_html);  
  
    $('#page_navigation .page_link:first').addClass('active_page');  
  
    $('#content').children().css('display', 'none');  
  
    $('#content').children().slice(0, show_per_page).css('display', 'block');  
  
});  
  
function previous(){  
  
    new_page = parseInt($('#current_page').val()) - 1;  
    if($('.active_page').prev('.page_link').length==true){  
        go_to_page(new_page);  
    }  
  
}  
  
function next(){  
    new_page = parseInt($('#current_page').val()) + 1;  
    if($('.active_page').next('.page_link').length==true){  
        go_to_page(new_page);  
    }  
  
}  
function go_to_page(page_num){  
    var show_per_page = parseInt($('#show_per_page').val());  
  
    start_from = page_num * show_per_page;  
  
    end_on = start_from + show_per_page;  
  
    $('#content').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');  
  
       $('.page_link[longdesc=' + page_num +']').addClass('active_page').siblings('.active_page').removeClass('active_page');  
  
    $('#current_page').val(page_num);  
}  
</script>

Ideally I'd like to use this along with the foundation framework pagination its code is

CSS

/* Pagination ---------------------- */
ul.pagination { display: block; height: 24px; margin-left: -5px; }
ul.pagination li { float: left; display: block; height: 24px; color: #999; font-size: 14px; margin-left: 5px; }
ul.pagination li a { display: block; padding: 1px 7px 1px; color: #555; }
ul.pagination li:hover a, ul.pagination li a:focus { background: #e6e6e6; }
ul.pagination li.unavailable a { cursor: default; color: #999; }
ul.pagination li.unavailable:hover a, ul.pagination li.unavailable a:focus { background: transparent; }
ul.pagination li.current a { background: #2ba6cb; color: white; font-weight: bold; cursor: default; }
ul.pagination li.current a:hover, ul.pagination li.current a:focus { background: #2ba6cb; }


HTML
<ul class="pagination">
  <li class="arrow unavailable"><a href="">&laquo;</a></li>
  <li class="current"><a href="">1</a></li>
  <li><a href="">2</a></li>
  <li><a href="">3</a></li>
  <li><a href="">4</a></li>
  <li class="unavailable"><a href="">&hellip;</a></li>
  <li><a href="">12</a></li>
  <li><a href="">13</a></li>
  <li class="arrow"><a href="">&raquo;</a></li>
</ul>

I'm cluess in going about it - is it even possible?

[jimmybrion]

Hi stephen,

1. If non of the dynamic css part is working then first check that whether there is any error in your code. (Through error console you can do that)

2. If your are facing problem with addClass then try with .attr('class')