根據元素的高度添加類

Question

我試圖根據（.CWproductPreviewDescription p）元素的高度隱藏span標簽。 這是用於截斷文本類型的功能。 我發現了一些類似的問題和答案，但是在我的情況下沒有什么起作用。 出於某種原因，我總是得到第一個匹配選擇器的高度，但我認為使用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());
});

Answer 2

.height()僅獲取第一個匹配元素的高度。 要獲取所有匹配元素的高度，請遍歷它們，如下所示：

jQuery(".CWproductPreviewDescription").each(function(){ // do this for each matched item
  if (jQuery("p",this).height() > 60) { // search for <p> in context of current element
    jQuery("span",this).css("display","hidden");
  }
});