Problema de protótipo JavaScript
-
18-09-2019 - |
Pergunta
Então, eu tenho um problema de javascript bastante básico que eu tenho batendo minha cabeça em uma parede por um tempo:
<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>
Basicamente, preciso criar uma varredora que defina a div para exibir: nenhum se todos os Li estiverem exibidos: nenhum.
Eu acho que começaria como:
function sweep(){
$$('div.alist').each( function( s ) {
ar = s.down().children
});
}
Quaisquer sugestões para bons tutoriais também seriam bem -vindos
Solução
Algo assim pode fazer você começar. Você precisará iterar através das crianças e verificar se elas são visíveis. Se algum deles não estiver, defina uma bandeira e quebre no loop. Se a bandeira for falsa, você não precisa ocultar o 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();
}
});
}
Outras dicas
Você poderia usar o SELECT () método de Element
para encontrar tudo li
descendentes. E executar um método Array.All para cada li
e verifique se todos retornam true. Esconda a div, se todos retornarem verdadeiros.
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();
}
});
}
Este código não foi testado.
Esta é a solução jQuery (o protótipo deve ser algo semelhante):
$('div.alist').css('display', function () {
return $(this).find('li:visible').length < 1 ? 'none' : '';
});