在博客页面上,我在第一行中使用grid-column: 1 / -2;
显示阻止项的列表我正在显示两项,将第一个博客项扩展到两列,然后显示第二项,其余各行在其中显示3个项每一行。屏幕截图将为您提供更好的主意。效果很好,但是当我切换到第二页或第三页时,它仍显示与第一行相同的行,而我只想显示最新的博客,将其分为两列,其余页面的第一行应显示3列。
我通过在第二个元素中检查current
类是否在寻呼机控件中找到的解决方法。
现在我的问题是,如果Ul LI元素在第二个元素中有current
类,那么我将如何检测到jQuery,如果它具有则我将更改grid-column: 1;
以便在第一个中显示3列如果它位于第2、3、4或第5页..
我的寻呼机控制代码如下
<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>
我尝试了下面的代码,该代码仅用于测试是否可以正常工作,而这个简单的代码无法正常工作。在这种情况下,我正在尝试更改背景色..
if($("ul li").hasClass('current')) {
$(this).css("background-color", "yellow");
}
答案 0 :(得分:0)
已解决:使用jQuery,我在首页的第一行显示了两项,在所有页面中显示了三行
CSS :
.article:nth-child(1) {
grid-column: 1;
}
jQuery Part
$(document).ready(function () {
var ctr = 1;
$('.nav-pager li').each(function () {
if ($(this).hasClass("current")) {
if (ctr == 2) {
// alert("Found : " + ctr);
$(".article:nth-child(1)").css("grid-column", "1 / -2");
}
}
ctr = ctr + 1;
});
});