Precisava verificar se todos os links de um menu (extraídos do banco de dados de um CMS) tinham o texto do link correspondente devidamente configurado, pois o colaborador final do site poderia esquecer de definir esse campo ao criar uma nova página.
Meu primeiro pensamento foi usar o seletor CSS: empty, mas ele não combina elementos com um espaço em branco simples (visão …), então eu tive que usar um snippet de javascript.
Mas percebi que não seria uma tarefa fácil, pois o comando verifyEval é muito restritivo. Não posso usar jQuery por exemplo, nem posso usar funções, loops ou outras estruturas úteis, mas apenas uma simples expressão javascript para avaliar.
Então, depois de 1 hora gasta pesquisando, consegui criar a expressão de que precisava:
Array.prototype.slice.call(document.querySelectorAll("#menu ul.col a")).every(function(e){return e.textContent.trim().length > 0})O que estou fazendo é:
- Pegue cada elemento que satisfaça o seletor CSS com document.querySelectorAll ()
- Como a função anterior retorna um objeto NodeList, preciso convertê-lo em um array para que possa trabalhar corretamente com ele. Isso é feito com o método Array.prototype.slice.call ().
- Agora preciso verificar se todos os elementos da matriz atendem a certas condições, então aproveito o método Array.every () para esse propósito.
- Finalmente, o mais fácil: um retorno de chamada para o método Array.every () que retorna um booleano indicando se o texto do elemento está presente ou não.
Saudações!