jquery - 仅隐藏具有 ID 的列表项的代码

Question

这似乎有点牵强，但我真的需要一些帮助。

我有这个代码:

<div id="navigation">
<ul class='top-nav'>
 <li id='pg911555508204622392'><a href="/" data-membership-required="0" >Home</a></li>
 <li id="active"><a href="/about.html">About</a></li>
 <li id='pg198396790797236835'><a href="/contact.html" data-membership-required="0" >Contact</a></li>
 <li class="signup"><a href="/signup.html" data-membership-required="0" >Signup</a></li>
 </ul>
<div style="clear:both;"></div>
</div> 

我需要一个我可以使用的代码(可能是 jquery)，这样当屏幕大小调整为 760px 时，每个带有 ID 的列表项都会被隐藏，并且只留下带有 CLASS 的列表项。通常，使用“媒体查询”在 css 中隐藏 ID 会更容易，但由于页面 (lis) 将由不同的用户创建，并且页面 ID 是随机分配的，所以我无法假设要隐藏哪个。

我只想隐藏任何分配有 ID 的列表项，并显示任何带有 CLASS 的列表项。我猜这可以用 jquery 来完成？

这是一个 jsfiddle 链接:http://jsfiddle.net/Delinx/73kq3cup/

任何帮助将不胜感激。

提前致谢。

Answer 1

您可以使用:

$(window).on('resize', function(){
  var win = $(this); //this = window
  if (win.height() == 760) { 
      $('#navigation li[id]').hide(); 
      $('#navigation li[class]').show(); 
  }
});