：可見不適用：第n個子選擇器

我有一個網格中的項目列表。其中一些用CSS隱藏，使用display: none;，通過類.hide。：可見不適用：第n個子選擇器

我試圖'清除'每4日可見項目通過添加一個類.clear-left它。我不明白爲什麼我的腳本不起作用。我使用的是：可見選擇器，但它似乎仍在計算display: none;的項目。

應該發生的事情是，你應該總是看到連續3個項目，沒有差距。

HTML

<div class="grid"> 
    <div class="item"> 
    1 
    </div> 
    <div class="item hide"> 
    2 
    </div> 
    <div class="item"> 
    3 
    </div> 
    <div class="item"> 
    4 
    </div> 
    <div class="item hide"> 
    5 
    </div> 
    <div class="item"> 
    6 
    </div> 
</div>

CSS

body { 
    margin: 0; 
} 

.grid { 
    margin-left: -30px; 
} 

/* Items that are hidden */ 
.hide { 
    display: none; 
} 

.item { 
    width: 150px; 
    float: left; 
    border: 1px solid; 
    margin-left: 30px; 
    margin-bottom: 30px; 
    padding: 10px; 
    font-size: 3em; 
    text-align: center; 
} 

.clear-left { 
    clear: left; 
}

var $itemShow = $('.item:visible'); 

$itemShow.filter(':nth-child(3n+1)').addClass('clear-left');

來源

2013-12-13 davidpauljunior

第n個孩子選擇將無法正常工作基於定製指數...它的工作原理基於基於兄弟元素的索引 –

您無法使用純CSS獲得此功能，因此請將您的過濾器更改爲可檢查項目索引是否可被3整除的函數：

http://jsbin.com/OVewUkaM/1/edit

這使用Modulus運算符。它將兩個數字相除時的餘數。

0 % 3; // 0 
1 % 3; // 1 
2 % 3; // 2 
3 % 3; // 0 
4 % 3; // 1 
5 % 3; // 2 
6 % 3; // 0

編輯：但我更喜歡通過限制容器的寬度做這樣的純CSS的事情。

.grid { 
    margin-left: -30px; 
    width: 606px 
}

http://jsbin.com/oXeGeGus/2/edit

來源

2013-12-13 01:20:17 gilly3

這很好，謝謝！你能解釋一下關於'=== 0'嗎？我明白'i％3'是在說索引是否可以被3整除，但是這個'=== 0'部分是什麼意思？ – davidpauljunior

是的，我同意CSS的東西，但是當項目高度不同而且你不想設置最小高度時，你遇到了浮點佈局的問題。 – davidpauljunior

@davidpauljunior - 關於最小高度的好處。請參閱我的編輯以獲取模數運算符的解釋。 – gilly3

nth-child上只適用於節點名稱，不適用於任何其他類或僞類或其他已應用的其他類。

您將不得不遍歷所有可見物品，並且只有在i%4==3的情況下才能應用您的班級。

來源

2013-12-13 00:57:00

nth-child選擇將無法正常工作基於定製指數...它的工作原理基於基於兄弟元素的索引，所以你要實現像

var $itemShow = $('.item:visible'); 

$itemShow.filter(function(idx){ 
    return idx % 4 == 3;//because index starts with 0 
}).addClass('clear-left');

演示濾波自己：Fiddle

來源

2013-12-13 00:59:59

您能否簡要解釋什麼'IDX％4 == 3;'手段？在萊曼的條款？我讀過％表示'Modulus（除法餘數）'，但這對我來說沒有任何意義。我明白'== 3'是第4項，只是不確定'idx％4'的意思。 – davidpauljunior

@davidpauljunior它是[剩餘]（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#.25_.28Modulus.29）操作符...它給出提醒像'3％4'=給出，'4％4 = 0'，'5％4 = 1'等分部操作......等等 –

：可見不適用：第n個子選擇器

回答

相關問題