Javascript 第n个子css属性正在统计显示属性设置为“无”的html元素。如何改变它?
我有一个简单的画廊使用无序列表Javascript 第n个子css属性正在统计显示属性设置为“无”的html元素。如何改变它?,javascript,jquery,html,css,css-selectors,Javascript,Jquery,Html,Css,Css Selectors,我有一个简单的画廊使用无序列表 <h1>Projects</h1> <hr> <!-- Projects gallery as unordered list --> <ul class="gallery"> <li class="item residential"> <img src="Projects/01-HighTorEast-EarlShilto
<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>
接下来,我编写了小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();
我的问题是:当我用上面的jQuery脚本对我的库项目进行排序时,似乎。项目:第n个子属性仍然在计算显示属性设置为“无”的元素。我不知道怎么咬它。我需要css.item:nth child属性在jQuery插件启动后只计算可见元素
网站位于此处删除您的第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");
})
刚刚用firebug在您的站点上测试了它,并做了一个处理。一个解决方案是将
nth child
css选择器更改为一个类,然后使用jQuery切换该类
li.item.marginClass { margin:30px 0px 30px 0px; }
JS:
隐藏节点时,设置一些“isHidden”属性标志
$(this).attr('isHidden')
,当显示节点时,删除此标志。removeAttr('isHidden')
,然后可以更新选择器
li.item:not([isHidden]):nth-child(4n+4) { margin:30px 0px 30px 0px; }
如果不想使用额外的属性,可以将其添加为类名,如中所示。CSS
而不是
li.item:nth-child(4n+4) { 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);
设置
display:none
时,是否可以将元素移到末尾,并在再次显示时将其移回?…或者只是将元素从DOM中完全移除,而不是仅隐藏它们?对于第n个子元素:n-child()
使用js而不是css不关心元素是否为display:none
。元素仍然存在。是的,我希望它足够明显,但由于这一评论已经提出,我将澄清,这将是最适合在您当前的点击手柄完美结束!解决我的问题。谢谢。4n+4
与2n+1
(奇数)或2n
(偶数)当然不同。。。你说得对。。。不知怎的,我误读了。修正了我的回答。我认为这有问题。我可以写li.item:not([ishiden]):nth child(2n+1)
,但现在,Firefox将其解释为li.item:nth child(2n+1):not([ishiden])
,并在开发工具中显示出来。@ngmir好奇,在规范中找不到提到伪类的顺序取决于解释器,所以听起来像个错误,这是因为定义第n个子项的方式-
li.item:nth-child(4n+4) { margin:30px 0px 30px 0px; }
li.item.split { margin:30px 0px 30px 0px; }
reorderColumns = function(ev) {
$('li.item').removeClass('split');
$('li.item:visible:nth-child(4n+4)').addClass('split');
ev.preventDefault();
};
$('.cat').on('click',reorderColumns);