javascript - 使用 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

实际上有一个 jQuery 插件叫做 Succinct chop 文本。这个插件支持多行文本。但是如果你不想包含这个插件，你只需要每行 chop 文本，那么创建一个很容易。

这是使用 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 chop 文本。这将使文本保持不变，但只会 chop 显示。

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