Nth-child css屬性將顯示屬性設置爲none的html元素進行計數。如何改變它？

Question

我有簡單的畫廊使用無序列表。

<h1>Projects</h1> 
    <hr> 

    <!-- Projects gallery as unordered list --> 

    <ul class="gallery"> 

     <li class="item residential"> 
     <img src="Projects/01-HighTorEast-EarlShilton/01-thumbnail.jpg" width="212" height="119" alt="High Tor East, Earl Shilton"> 
     <h2><a class="info" href="Projects/01-HighTorEast-EarlShilton/info.php">High Tor East, Earl Shilton</a></h2> 
     <h3><a class="cat" href="residential">Residential</a></h3> 
     </li> 

     <li class="item modernisation"> 
     <img src="Projects/02-Hollycroft-Hinckley/02-thumbnail.jpg" width="212" height="119" alt="Hollycroft, Hinckley"> 
     <h2><a class="info" href="Projects/02-Hollycroft-Hinckley/info.php">Hollycroft, Hinckley</a></h2> 
     <h3><a class="cat" href="modernisation">Modernisation & Domestic Extensions</a></h3> 
     </li> 

     <li class="item residential"> 
     <img src="Projects/03-SpaLane-Hinckley/03-thumbnail.jpg" width="212" height="119" alt="Spa Lane, Hinckley"> 
     <h2><a class="info" href="Projects/03-SpaLane-Hinckley/info.php">Spa Lane, Hinckley</a></h2> 
     <h3><a class="cat" href="residential">Residential</a></h3> 
     </li> 

     <li class="item residential"> 
     <img src="Projects/04-Farnhambridge-Rothley/04-thumbnail.jpg" width="212" height="119" alt="Farnhambridge Farm, Rothley"> 
     <h2><a class="info" href="Projects/04-Farnhambridge-Rothley/info.php">Farnhambridge Farm, Rothley</a></h2> 
     <h3><a class="cat" href="residential">Residential</a></h3> 
     </li> 

     <li class="item modernisation"> 
     <img src="Projects/05-NetherfieldClose-BroughtanAstley/05-thumbnail.jpg" width="212" height="119" alt="Netherfield Close, Broughtan Astley"> 
     <h2><a class="info" href="Projects/05-NetherfieldClose-BroughtanAstley/info.php">Netherfield Close, Broughtan Astley</a></h2> 
     <h3><a class="cat" href="modernisation">Modernisation & Domestic Extensions</a></h3> 
     </li> 

     <li class="item modernisation"> 
     <img src="Projects/06-Bridlepath-Elmesthorpe/06-thumbnail.jpg" width="212" height="119" alt="Bridlepath, Elmesthorpe"> 
     <h2><a class="info" href="Projects/06-Bridlepath-Elmesthorpe/info.php">Bridlepath, Elmesthorpe</a></h2> 
     <h3><a class="cat" href="modernisation">Modernisation & Domestic Extensions</a></h3> 
     </li> 

     <li class="item residential"> 
     <img src="Projects/07-Bridlepath-Elmesthorpe/07-thumbnail.jpg" width="212" height="119" alt="Bridlepath, Elmesthorpe"> 
     <h2><a class="info" href="Projects/07-Bridlepath-Elmesthorpe/info.php">Bridlepath, Elmesthorpe</a></h2> 
     <h3><a class="cat" href="residential">Residential</a></h3> 
     </li> 

     <li class="item feasibility"> 
     <img src="Projects/08-GrangeCroft-Ullesthorpe/08-thumbnail.jpg" width="212" height="119" alt="Grange Croft, Ullesthorpe"> 
     <h2><a class="info" href="Projects/08-GrangeCroft-Ullesthorpe/info.php">Grange Croft, Ullesthorpe</a></h2> 
     <h3><a class="cat" href="feasibility">Feasibility layouts</a></h3> 
     </li> 

     <li class="item master"> 
     <img src="Projects/09-RailwayInn-Sileby/09-thumbnail.jpg" width="212" height="119" alt="The Railway Inn, Sileby"> 
     <h2><a class="info" href="Projects/09-RailwayInn-Sileby/info.php">The Railway Inn, Sileby</a></h2> 
     <h3><a class="cat" href="master">Master planning</a></h3> 
     </li> 


    </ul> 

    </section> 

比我的CSS我設定每四個孩子.item類的右邊距值爲零。我這樣做是爲了在我的頁面上保留四行，並且不刪除頁邊距，我只能放三頁。

ul.gallery { clear:both; list-style:none; margin:0; padding:0; width:940px; } 
.gallery a:hover { text-decoration:underline; } 
li.item { display:inline; margin:30px 20px 30px 0px; padding:0px; height:178px; width:220px; float:left; background:#ededed url('../Images/featuredline.png') repeat-x 0% 100%; overflow:hidden; } 
li.item:nth-child(4n+4) { margin:30px 0px 30px 0px; } 

接下來，我寫了一個小的jQuery代碼來按類別排序項目。所以如果有人點擊「住宅」鏈接，它會隱藏不同類別的元素。

$('.cat').bind('click', function(e) { 
    var cat = $(this).attr('href'); 
    $('.item').each(function() { 
    var itemClass = $(this).attr('class'); 
    if (itemClass != 'item '+cat) { 
     $(this).css({"display":"none"}); 
    }; 


    }); 
    e.preventDefault(); 

我的問題是：第n個孩子財產仍在計數具有顯示屬性設置爲none元素：當我和上面的jQuery腳本似乎.item我的畫廊項目進行排序。我不知道如何咬它。我需要css .item：nth-​​child屬性來計算jQuery插件啓動後僅顯示可見元素。

網站可以在這裏找到http://www.damianwojtczak.com/avd2/projects.php

Answer 1

刪除您的第n個孩子的CSS樣式，並在每次更改佈局時，稱此：

$("li.item:visible").each(function(i) { 
    if((i+1)%4==0) $(this).css("margin","30px 0"); 
    else $(this).css("margin","30px 20px 30px 0"); 
}) 

只是測試它在網站上使用螢火蟲和工作一種享受。

Answer 2

一種解決方案是將nth-child css選擇器更改爲類，並使用jQuery切換類。

li.item.marginClass { margin:30px 0px 30px 0px; } 

JS：

$(function(){ 
    var $items=$('li.item'); 
    function toggleMargin(}{ 
     $items.removeClass('marginClass').filter(':visible').addClass(function(index){ 
       return index % 4 ===0 && index !=0 ? 'marginClass' : ''; 
     }); 
    } 
    /* call for page loaded items*/ 
    toggleMargin(}; 

    $('.cat').bind('click', function (e) { 
     /* filtering code here*/ 

     /* adjust class*/ 
     toggleMargin(}; 

    }) 



}); 

Answer 3

當您隱藏節點，設置一些「是否隱藏」屬性的標誌$(this).attr('isHidden')，當你告訴你的節點，刪除此標誌.removeAttr('isHidden')，那麼你就可以更新你的選擇

li.item:not([isHidden]):nth-child(4n+4) { margin:30px 0px 30px 0px; } 

如果您不想使用額外的屬性，可以將其添加爲類名稱，如Tomalak's answer。

Answer 4

CSS

，而不是

li.item:nth-child(4n+4) { margin:30px 0px 30px 0px; } 

使用

li.item.split { margin:30px 0px 30px 0px; } 

jQuery的

reorderColumns = function(ev) { 
    $('li.item').removeClass('split'); 
    $('li.item:visible:nth-child(4n+4)').addClass('split'); 
    ev.preventDefault(); 
}; 

$('.cat').on('click',reorderColumns);