Ocultar algo no menu

[Renan F. da Silva 0]

Olá pessoal,

 

Tenha o seguinte menu

<ul class="menu">
   <li><a href="#" title="Item 01">Item 01</a></li>
   <li><a href="#" title="Item 02">Item 02</a></li>
   <li><a href="#" title="Item 03">Item 03</a></li>
   <li><a href="#" title="Item 04">Item 04</a></li>
</ul>

Gostaria de saber como eu poderia ocultar uma li usando algo com o data-

...
   <li data-num="2"><a href="#" title="Item 01">Item 01</a></li>
...

Tipo ocultar todas as linhas que fossem menor 3.

 

Pois ocultar uma linha em expecifico eu consigo, porém encontra as linhas que possuam um numero menor do que o informado para ela ocultar eu não consigo.

 

Tentei percorrer todas as li porem não conseguia achar o valor da data-

 

 

Obrigado

[angelorubin 142]

Mas de que forma será disparada a ação?

[Alex Hiroshi 7]

Rola um jQuery na página? Se sim, uma opção é o filter.

[Renan F. da Silva 0]

Mas de que forma será disparada a ação?

Ao carregar...

Rola um jQuery na página? Se sim, uma opção é o filter.

Sim, você poderia colocar um exemplo, pois tipo não vejo a logica / como eu possa ocultar um <li> se o prametro dela for menor do que, o que eu quero que seja exibido.

 

Tipo

 
 <li data-num="1"><a href="#" title="">Item 01</a></li>
 <li data-num="1"><a href="#" title="">Item 02</a></li>
 <li data-num="2"><a href="#" title="">Item 03</a></li>
 <li data-num="3"><a href="#" title="">Item 04</a></li>
 <li data-num="4"><a href="#" title="">Item 05</a></li>

Ae pelo javascript, podendo ser até pelo jquery(solução que seria bem melhor). Ae tipo a logica seria assim

 

Se data-num(do HTML) for maior do(exemplo)2, não exibi-la(display:none ou hide)

[angelorubin 142]

Utilize pseudo-seletores - http://api.jquery.com/gt-selector

 

Exemplo :

 

HTML

	<ul class="menu">
	   <li><a href="#" title="Item 01">Item 01</a></li>
	   <li><a href="#" title="Item 02">Item 02</a></li>
	   <li><a href="#" title="Item 03">Item 03</a></li>
	   <li><a href="#" title="Item 04">Item 04</a></li>
	   <li><a href="#" title="Item 05">Item 05</a></li>
	   <li><a href="#" title="Item 06">Item 06</a></li>
	</ul>

JS

	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(function(){
			$('.menu li:gt(2)').hide();
		});
	</script>

[Lucas M. Martins 5]

Também pode utilizar um each em jquery...

$("#DivMenu li").each(function(){
	if($(this).attr("data-num") < 3){
		$(this).hide()
	}
});

[Renan F. da Silva 0]

 

Também pode utilizar um each em jquery...

$("#DivMenu li").each(function(){
	if($(this).attr("data-num") < 3){
		$(this).hide()
	}
});

Obrigado LukasWolf7, :) Funcionou perfeitamente !