隱藏顯示兩行後的所有行

我想在顯示兩行後隱藏行。隱藏顯示兩行後的所有行

$(window).load(function() { 
    $(".ThisClass> div").next().next().css('visibility','hidden'); 
    })

我能夠用上面的代碼做到這一點，但我想要做的是隱藏所有行後兩行。以上代碼僅在有3行時纔有效。

請建議。

來源

2015-09-02 Suraj

你會顯示你的HTML和CSS代碼呢？ –

我得到了我的答案，謝謝 – Suraj

您可以使用nextAll()函數。

第一目標與.eq(1)（零的索引）所述第二元件與所述使用.nextAll()到任何的CSS分配給所選元素的以下兄弟姐妹：

$('#hide').on('click', function() { 
 
    $('#test > .inner').eq(1).nextAll().hide(); 
 
});

#test { 
 
    width:100%; 
 
} 
 
.inner { 
 
    width:100%; 
 
    float:left; 
 
    padding:5px; 
 
    border:1px solid #d8d8d8; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="test"> 
 
    <div class="inner">test</div> 
 
    <div class="inner">test</div> 
 
    <div class="inner">test</div> 
 
    <div class="inner">test</div> 
 
    <div class="inner">test</div> 
 
    <div class="inner">test</div> 
 
    <div class="inner">test</div> 
 
</div> 
 
<button id="hide">Hide rows</button>

來源

2015-09-02 06:46:11 kapantzak

很簡單使用slice()功能。

$(document).ready(function(){ 
 
    $(".ThisClass> div").slice(2).hide(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="ThisClass"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    <div>4</div> 
 
    <div>5</div> 
 
    <div>6</div> 
 
</div>

來源

2015-09-02 06:46:12 RRK

下面是使用each()功能

$(".ThisClass> div").each(function (i) { 
     if (i <=1) 
      return true; // Skip first two divs 
     else 
      $(this).hide(); 

    });

來源

2015-09-02 06:58:52

嘗試利用企圖:gt(index) Selector

$(function() { 
 
    $(".ThisClass > div:gt(1)").css("visibility", "hidden"); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 

 
<body> 
 
    <div class="ThisClass"> 
 
    <div>abc</div> 
 
    <div>def</div> 
 
    <div>ghi</div> 
 
    <div>jkl</div> 
 
    <div>mno</div> 
 
    </div> 
 
</body>

來源

2015-09-02 07:11:07 guest271314

只需修改您的css選擇器並隱藏所有行。

function hiderows() { 
 
    $('.ThisClass > div:nth-child(n+3)').hide(); 
 
} 
 

 
function showrows() { 
 
    $('.ThisClass > div').show(); 
 
}

.ThisClass > div { 
 
    border: 1px solid #ccc; 
 
    padding: 3pt; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="ThisClass"> 
 
    <div>#1</div> 
 
    <div>#2</div> 
 
    <div>#3</div> 
 
    <div>#4</div> 
 
    <div>#5</div> 
 
    <div>#6</div> 
 
    <div>#7</div> 
 
</div> 
 

 
<button onclick="hiderows()">Hide rows</button> 
 
<button onclick="showrows()">Show rows</button>

Vanilla-JavaScript solution

來源

2015-09-02 07:16:13 Werner

原生選擇器應該是最快的。 +1 –

隱藏顯示兩行後的所有行

回答

相關問題