大佬教程收集整理的这篇文章主要介绍了使用Javascript / jQuery创建摘录，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
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>
这是使用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>
以上是大佬教程为你收集整理的使用Javascript / jQuery创建摘录全部内容，希望文章能够帮你解决使用Javascript / jQuery创建摘录所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。