JavaScript原型问题
-
18-09-2019 - |
题
因此,我有一个相当基本的JavaScript问题,我已经将头撞到墙上了一段时间:
<div class='alist'>
<ul>
<li class='group_1'> An Item </li>
<li class='group_1'> An Item </li>
<li class='group_2'> An Item </li>
</ul>
</div>
<div class='alist'>
<ul>
<li class='group_1'> An Item </li>
<li class='group_1'> An Item </li>
<li class='group_2'> An Item </li>
</ul>
</div>
<script>
function toggle_item( num ){
$$( 'li.group_' + num ).invoke('toggle');
}
</script>
基本上,我需要创建一个将DIV设置为显示的清扫器:如果所有LI都显示:无。
我认为它会开始:
function sweep(){
$$('div.alist').each( function( s ) {
ar = s.down().children
});
}
也欢迎对良好教程的任何建议
解决方案
这样的事情可能会让您入门。您需要迭代孩子,并检查他们是否可见。如果没有任何一个,请设置旗帜并从循环中断开。如果标志为false,那么您就不需要隐藏 div
.
function sweep(){
$$('div.alist').each( function( s ) {
var shouldHide = true;
var children = s.down().childElements();
children.each(function(li) {
if(li.visible()) {
shouldHide = false;
throw $break;
}
});
if(shouldHide) {
s.hide();
}
});
}
其他提示
您可以使用 选择() 的方法 Element
找到所有 li
子孙。并运行一种方法 Array.All 每个 li
并检查全部返回是否为true。如果全部返回,请隐藏DIV。
function sweep() {
// check each div
$$('div.alist').each(function(element) {
var listItems = element.select('li');
// are the list items of this div hidden?
var listItemsHidden = listItems.all(function(item) {
return item.visible();
});
// hide the div too if so
if(listIemsHidden) {
element.hide();
}
});
}
此代码未经测试。
这是jQuery解决方案(原型必须是相似的):
$('div.alist').css('display', function () {
return $(this).find('li:visible').length < 1 ? 'none' : '';
});
不隶属于 StackOverflow