使用Javascript/jQuery创建摘录

Question

我试图使用一些数组方法以某种方式摘录所有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),
		joinArray = toArray.join(''),
		joinArrayToArray = joinArray.split(" "),
		joinArrayToArrayPop = joinArrayToArray.pop(),
		joinArrayToArrayPopPush = joinArrayToArray.push(more),
		joinArrayToArrayPopPushJoin = joinArrayToArray.join(' '),
		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, 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>

Answer 1

实际上有一个名为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, 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>

但...

执行此操作的正确方法是使用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, 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>

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, 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>

Answer 2

这个问题早已解决，但我想我会发布我的解决方案，因为它可能会帮助其他数字旅程的女士/男士寻找制作片段！

我想在空白处剪掉原来的字符串。在这个例子中，我发现lastIndexOf非常有用！

if (someString.length > EXCERPT_MAX_LENGTH) {
  excerpt = someString.substring(0, EXCERPT_MAX_LENGTH);
  excerpt = excerpt.substring(0, excerpt.lastIndexOf(' '));
  excerpt += '...';
}

请注意，我在生成的缩短字符串的末尾附加了一个省略号！