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

根据元素的高度添加类

2 个答案: