根据宽度隐藏元素答案

【问题标题】：hide element based on width根据宽度隐藏元素
【发布时间】：2015-09-01 20:08:12
【问题描述】：

如果图像大小为

<div id="attachment_65209" style="width: 230px">
 <a href="#" rel="lightbox[70848]">
  <img src="/LCP-2015-05-31-s1.jpg" width="220" height="269">
 </a>
 <p class="wp-caption-text">Sen. Charles Schwertner • District 5</p>
</div>

到目前为止，我尝试使用以下方法但没有运气：

<script>
jQuery(window).on('resize load', function () {
 jQuery('.wp-caption-text').each(function(i, el){
  var section = jQuery('.wp-caption-text');
  var width = section.width();
  if (width <= 300) {
   section.attr('class', 'caption-none');
  }
 })
})
</script>
<style>.caption-none{display:none;}</style>

有什么建议吗？

【问题讨论】：

标签： jquery resize width hide

【解决方案1】：

你可以使用.filter()过滤掉元素，然后使用addClass()添加类

jQuery(window).on('resize load', function() {

    //Filter elements having width < 300
    jQuery('.wp-caption-text').filter(function(i, el) {
        return $(this).width() <= 300;
    }).addClass('caption-none'); //Add the required class
})

【讨论】：

【解决方案2】：

试试这个：

jQuery('.wp-caption-text').each(function(i, el){
    if (jQuery(this).width() <= 300) {
        jQuery(this).addClass('caption-none');
    }
});

【讨论】：

谢谢！我注意到的一件事是在查看单个帖子 (communityimpact.com/…) 时工作正常，但是因为我的主页 (communityimpact.com) 正在使用无限滚动......当你到达那个帖子时，标题仍然出现。有什么想法吗？

【解决方案3】：

您正在获取元素数组的宽度。您需要将其应用于每个：

var section = jQuery(this);
var width = section.width();

【讨论】：