第N个子css属性正在计算display属性设置为none的html元素.如何更改
Nth-child css property is counting html elements with display property set to none. How to change it?
我有一个使用无序列表的简单库。
<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();
我的问题是:当我用上面的jQuery脚本对我的图库项目进行排序时,.item:nth子属性似乎仍在计算display属性设置为none的元素。我不知道该怎么做。我需要css.item:nth子属性来计算jQuery插件启动后的可见元素。
此处提供网站http://www.damianwojtczak.com/avd2/projects.php
删除你的第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:
$(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(};
})
});
当您隐藏节点时,设置一些"isHidden"属性标志$(this).attr('isHidden')
,当您显示节点时,删除此标志.removeAttr('isHidden')
,然后您可以更新选择器
li.item:not([isHidden]):nth-child(4n+4) { margin:30px 0px 30px 0px; }
如果您不想使用额外的属性,可以将其添加为类名,如Tomalak的回答所示。
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);
相关文章:
- RegEx删除空属性?例如,如果(class=“”||class=“”)移除;否则就下课
- 全局变量和全局对象的属性之间有什么区别吗
- 如果使用 lodash 将属性存在于另一个对象中,则向对象添加属性
- 如何在Bootstrap Modal中为动态点击生成的变量设置jade属性
- 序列化数据属性中对象的最可靠方法
- 分析高度属性时出现意外值{{specs.height}}.index.html
- TypeError:无法读取属性'推'未定义的JavaScript
- 同样,同样的错误'ahorcado.js:26未捕获类型错误:无法读取属性'beginPath'
- AngularJS-使用'true'属性
- 可以't使用JavaScript获取width属性
- 未捕获的TypeError无法读取未定义的属性socialsharing
- 如何使用javascript获取嵌套对象中所有子对象的单个属性
- 重写CSS:使用jquery显示none属性
- Pre 标记似乎忽略了样式属性(例如 display:none)
- 如何使用属性 display:none 测量类的长度
- JS监视CSS属性的变化,如“display:none”=>“display:block”
- 获取隐藏(display:none)html元素的属性
- jQuery:如何只触发当前菜单,并在其值显示为none时删除样式属性
- Jquery FadeIn添加显示属性,而不是仅仅删除display:none
- 第N个子css属性正在计算display属性设置为none的html元素.如何更改