根據元素的高度添加類

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

.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"); 
    } 
}); 

Answer 2

它要它做的所有元素，你需要使用每個。當您使用返回值的方法時，它只能在集合的第一個元素上起作用。

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