-2

在博客页面上，我正在显示grid-column: 1 / -2;第一行中使用的块项目列表，我正在显示两个项目，将第一个博客项目拉伸到两列，然后显示第二个项目，其余行在每行中显示 3 个项目。截图会给你一个更好的主意。这很好用，但是当我切换到第二页或第三页时，它仍然显示与其相同的第一行，而我只想显示最新的博客在两列中拉伸，其余页面应在第一行显示 3 列。

通过检查current第二个元素中是否包含类，我在寻呼机控件中找到了一种解决方法。

现在我的问题是，如果 Ul LI 元素在第二个元素中有类，我如何检测使用 jQuery current，如果有，那么我将更改它，grid-column: 1;以便如果它在 2、3、4 或 5th 上，它将在第一行显示 3 列。 .. 页..

在此处输入图像描述

我的寻呼机控制代码如下

<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");
  }
4

1 回答 1

0

已解决：使用 jQuery 我在第一页的第一行显示两个项目，在所有页面中显示 3 行

CSS：

.article:nth-child(1) {
   grid-column: 1;
}

jQuery 部分

$(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;
        });
    });
于 2020-10-28T10:33:56.907 回答