我试图使用一些数组方法以某种方式摘录所有h3文本.但问题是选择我用作选择器的所有h3
var productTitle = $('#products-carousel').find('.single-trending-list').find('h3').text();
它将所有h3文本拼凑在一起,最后我得到所有h3的相同文本
如何单独选择所有h3？
这是JSFiddle
这是我的代码：
var productTitle = $('#products-carousel').find('.single-trending-list').find('h3').text(),productTitleExcerpt;
var toArray = productTitle.split("",36),joinArray = toArray.join(''),joinArrayToArray = joinArray.split(" "),joinArrayToArrayPop = joinArrayToArray.pop(),joinArrayToArrayPopPush = joinArrayToArray.push('...'),joinArrayToArrayPopPushJoin = joinArrayToArray.join(' '),productTitleExcerpt = joinArrayToArrayPopPushJoin;
$('#products-carousel').find('.single-trending-list').find('h3').text(productTitleExcerpt);
<ul class="ul-trending-list" id="products-carousel">
<li>
<div class="single-trending-list">
<span>$90.00</span>
<h3>Leather Clutch,Gray Distressed</h3>
</div>
</li>
<li>
<div class="single-trending-list">
<span>$91.00</span>
<h3>Sori Yanagi Butterfly Y Wenge Stool</h3>
</div>
</li>
<li>
<div class="single-trending-list">
<span>$31.00</span>
<h3>BOTTLIT Canister,600ml</h3>
</div>
</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
我做了一个解决方案.现在我已经使用了每个方法并创建了一个函数并设置了3个arg来传递元素,字母数,扩展名可选.所以现在我可以在任何地方使用它.
这是JSFiddle
以下是您可以在此处看到的代码.
var originalCarouselH3 = $('#products-carousel').find('.single-trending-list').find('h3');
function excerpt(excerptElement,number,more = "..."){
excerptElement.each(function(){
var productTitle = $(this).text(),productTitleExcerpt,toArray = productTitle.split("",number),joinArrayToArrayPopPush = joinArrayToArray.push(more),productTitleExcerpt = joinArrayToArrayPopPushJoin;
if(productTitle.length > number){
productTitle = productTitleExcerpt;
$(this).text(productTitle);
}
});
}
excerpt(originalCarouselH3,30);
<ul class="ul-trending-list" id="products-carousel">
<li>
<div class="single-trending-list">
<span>$90.00</span>
<h3>Leather Clutch,600ml</h3>
</div>
</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
解决方法
实际上有一个名为
Succinct的jQuery插件可以截断文本.此插件支持多行文本.但是,如果您不想包含此插件,并且只需要按行截断文本,则可以轻松创建一个.
这是使用jQuery做你想做的最简单的方法.
$('#products-carousel .single-trending-list h3').each(function() {
$(this).text($(this).text().substr(0,36) + '...');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="ul-trending-list" id="products-carousel">
<li>
<div class="single-trending-list">
<span>$90.00</span>
<h3>Leather Clutch,600ml</h3>
</div>
</li>
</ul>
但…
执行此操作的正确方法是使用CSS截断文本.这将使文本保持不变,但仅显示截断.
.single-trending-list h3 {
width: 11em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="ul-trending-list" id="products-carousel">
<li>
<div class="single-trending-list">
<span>$90.00</span>
<h3>Leather Clutch,600ml</h3>
</div>
</li>
</ul>
jQuery插件救援！
(function($) {
$.fn.truncate = function(length) {
this.text(function(idx,txt) {
return txt.length > length ? txt.substr(0,length) + '…' : txt;
});
}
$.fn.truncateCss = function(width) {
this.each(function() {
$(this).css({
width : width,whiteSpace: 'nowrap',overflow: 'hidden',textOverflow: 'ellipsis',});
});
}
} (jQuery));
// ======================================================================
// USE EITHER ONE
// ======================================================================
$('#products-carousel .single-trending-list h3').truncate(22);
//$('#products-carousel .single-trending-list h3').truncateCss('11em');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="ul-trending-list" id="products-carousel">
<li>
<div class="single-trending-list">
<span>$90.00</span>
<h3>Leather Clutch,600ml</h3>
</div>
</li>
</ul>
