When displaying a list of blog items on the blog page, I am using grid-column: 1 / -2;. In the first row, the first blog item spans two columns while the second and subsequent rows display three items in each row. This setup works well, but when moving to the second or third page, the first row remains the same. I only want the latest blog to stretch across two columns in the first row, with three columns displayed in the first row on all other pages.
To work around this issue, I found a solution in the pager control by checking if the class current is present in the second element.
My question now is, how can I use jQuery to detect if the UL LI element has the class current in the second position? If it does, I want to change the grid-column: 1; to display three columns in the first row on the 2nd, 3rd, 4th, or 5th pages.
https://i.stack.imgur.com/aeI6Q.png
The code for my pager control is as follows:
<ul id="ContentPlaceHolder1_PagerControl1_pnlPager" class="nav-pager">
<li><a id="ContentPlaceHolder1_PagerControl1_-1" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$PagerControl1$-1','')"> « </a></li>
<li><a id="ContentPlaceHolder1_PagerControl1_0" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$PagerControl1$0','')">1</a></li>
<li class="current"><span id="ContentPlaceHolder1_PagerControl1_39e9e1f727784cce80f1a3b5e6e43ac0">2</span></li>
<li><a id="ContentPlaceHolder1_PagerControl1_2" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$PagerControl1$2','')">3</a></li>
<li><a id="ContentPlaceHolder1_PagerControl1_26" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$PagerControl1$26','')"> » </a></li>
</ul>
I attempted the following code for testing purposes to see if it would work. This simple code, where I try to change the background color, did not work:
if($("ul li").hasClass('current')) {
$(this).css("background-color", "yellow");
}