Pregunta Crear extracto usando Javascript / jQuery


Estoy tratando de hacer un extracto de todo h3 texto de alguna manera utilizando algunos métodos de matriz. Pero el problema es seleccionar todo h3 Usé como selector es

var productTitle = $('#products-carousel').find('.single-trending-list').find('h3').text();

Y agarra todo h3 textos juntos y finalmente recibo el mismo texto para todos h3

¿Cómo puedo seleccionar todo h3 ¿individualmente?

Aquí está JSFiddle

Aquí está mi Código:

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>

He hecho una SOLUCIÓN . Ahora he usado cada método y también crea una función y establece 3 arg pasar elemento, número de letra, extensión Opcional. Entonces ahora puedo usarlo en cualquier lugar.

Aquí está JSFiddle

Y aquí está el código que puedes ver aquí.

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>


6
2018-03-08 13:18


origen


Respuestas:


En realidad, hay un complemento para jQuery llamado Sucinto eso trunca el texto. Este complemento admite texto de varias líneas. Pero si no desea incluir este complemento, y solo necesita truncar el texto por línea, es fácil crear uno.

Esta es la forma más fácil de hacer lo que está intentando hacer, utilizando 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>

Pero...

La forma correcta de hacerlo sería utilizar CSS para truncar el texto. Esto dejará el texto sin modificar, pero solo se mostrará truncado.

.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 complementos para el rescate!

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


8
2018-03-08 13:27



En lugar de buscar todos los subtítulos al mismo tiempo, recorra cada h3 encontrado e inserte el título en una matriz.

var productTitle =[]; 
$('#products-carousel').find('.single-trending-list').find('h3').each(
  function() {
    productTitle.push($(this).text())
  }
)

El valor de productTitle en el ejemplo de JSFiddle será:

["Leather Clutch, Gray Distressed", "Sori Yanagi Butterfly Y Wenge Stool", "BOTTLIT Canister, 600ml"]

A continuación, puede recorrer cada valor de la matriz con un ciclo for y hacer lo que quiera con él.


3
2018-03-08 13:23



Intenta usar el callBack funcion de .text() para lograr lo que quieres,

$('#products-carousel .single-trending-list h3').text(function(_, txt) {
  return txt.length > 36 ? txt.substr(0, 36) + "..." : txt;
});

MANIFESTACIÓN


1
2018-03-08 13:24



La forma más corta de hacer eso, creo que es esto.

$(".your-selector").each(function() { $(this).text($(this).text().substr(0, 140) + "..."); });

Tenga en cuenta que "140" se puede cambiar de acuerdo con la longitud deseada.


0
2018-04-26 11:08



Esta pregunta ya se resolvió durante mucho tiempo, pero pensé que publicaría mi solución en el caso de que pudiera ayudar a otros hombres / mujeres de viaje digital en la búsqueda de hacer un fragmento.

Quería cortar la cuerda original en un espacio en blanco. En este caso, encontré lastIndexOf ¡bastante útil!

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

Tenga en cuenta que añado un Elipsis ¡hasta el final de la cadena de acortamiento resultante!


0
2017-09-04 00:47