javascript - 根据元素的高度添加类

Question

我试图根据 (.CWproductPreviewDescription p) 元素的高度隐藏一个跨度标签。这是用于 chop 文本类型的函数。我发现了一些类似的问题和答案，但在我的情况下没有任何效果。出于某种原因，我总是得到第一个匹配的选择器的高度，但我认为使用 jQuery 选择器会自动循环遍历所有元素。这是我的代码

简单的 CSS 来切断文本的长度并在点击时显示。工作正常

CSS

  .CWproduct .CWproductPreviewDescription p {
    max-height: 65.4px;
    overflow: hidden;
    margin: 0 6px;
  }

  .CWproductPreviewDescription p.more {
    max-height: 200px;
    overflow:visible;
  }

  .CWproductPreviewDescription span{
    cursor: pointer;
  }

jQuery

jQuery(window).load(function() {

// add a span tag to pproduct preview description
jQuery("<span>more</span>").appendTo(".CWproductPreviewDescription");

//This is the block of code that I can not get to work**

//add class to hide span if .CWproductPreviewDescription p > 60
if (jQuery(".CWproductPreviewDescription p").height() > 60){
  jQuery(".CWproductPreviewDescription span").css("display","hidden");
  var  h = (jQuery(".CWproductPreviewDescription p").height());
  console.log(h)
}

这两个代码块也可以工作

// set up show hide on more link
//change text within span to reflect state
jQuery(".CWproductPreviewDescription p").click(function(){
jQuery( this).toggleClass( "more" );
  var text = jQuery(this).siblings(".CWproductPreviewDescription span").text() == 'Less' ? 'More' : 'Less';
jQuery(this).siblings(".CWproductPreviewDescription span").text(text);

});
jQuery(".CWproductPreviewDescription span").click(function(){
jQuery( this).siblings(".CWproductPreviewDescription p").toggleClass( "more" );
  var text = jQuery(this).text() == 'Less' ? 'More' : 'Less';
  jQuery(this).text(text);
  });
});

html 是动态生成的，包含任意数量的具有各种文本长度的 div

<div class="CWproductPreviewDescription">
  <p class="more"> description text with however many lines</p>
  <span>more</span>
</div>

---

编辑:我只是想添加我现在拥有的完整代码

CSS

.CWproduct .CWproductPreviewDescription p{
  //line height of <p> * number of lines to show
  //using Max-height to allow expanding
  max-height: 65.4px;
  overflow: hidden;
  margin: 0 6px;
}
.CWproductPreviewDescription p.more{
  max-height: 200px; //arbitrary height for testing
  overflow:visible;
}
.CWproductPreviewDescription span{
  cursor: pointer;
}

jQuery

jQuery(window).load(function() {
  //cache selectors
  // add a span tag to product preview description
  var d = jQuery(".CWproductPreviewDescription");
  jQuery("<span>more</span>").appendTo(d);
  var p = jQuery(".CWproductPreviewDescription p");
  var s = jQuery(".CWproductPreviewDescription span");

  jQuery(d).each(function(){ 
    // search  <p> in context of current element and get height
    if (jQuery("p",this).height() < 60) { 
    //if element is smaller than 60px hide the span tag
    jQuery("span",this).css("display","none");
  }
});

// set up show/hide on click <p>
jQuery(p).click(function(){
  jQuery( this).toggleClass( "more" );
  //change text within span to reflect state
  var text = jQuery(this).siblings(s).text() == 'Less' ? 'More' : 'Less';
  jQuery(this).siblings(s).text(text);
});// set up show/hide on click <span>

jQuery(s).click(function(){
  jQuery( this).siblings(p).toggleClass( "more" );

  //change text within span to reflect state
  var text = jQuery(this).text() == 'Less' ? 'More' : 'Less';
  jQuery(this).text(text);
  });
});

Answer 1

如果你想对所有元素都这样做，你需要使用每个元素。当您使用返回值的方法时，它仅适用于集合的第一个元素。

jQuery(".CWproductPreviewDescription p").each( function(){
   var currentP = jQuery(this);
   console.log(currentP.height());
});