Question

如果图片尺寸为＆lt; = 300

，我想用class =“wp-caption-text”隐藏元素

<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>

任何建议？

Answer 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
})

Answer 2

试试这个：

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

Answer 3

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

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

隐藏基于宽度的元素

3 个答案: