jQuery Girl
  1. jQuery Girl
  3. Sélectionnez la dernière ligne d’un paragraphe en utilisant Javascript
Intereting Posts
appeler manuellement une fonction en javascript? jQuery UI Droppable and Sortable – déposer dans le lieu de sorting correct Passez un tableau d’objects à l’aide de jquery.load à MVC 3 Comment comparer la couleur assignée à un élément en utilisant JavaScript Téléchargement d’un fichier sur un client dans l’application ASP.NET MVC à l’aide de JQuery Pourquoi cette transition CSS3 en hauteur ne fonctionne pas erreur de fonction jQuery Bootstrap 4 avec Modal distant jquery fancybox, iframe ou ajax, charge avec l’URL Sélectionner toutes les valeurs d’option pas d’abord Pourquoi preventDefault ne fonctionne pas? onClick n’a pas fonctionné dans la forme? Modèle de plugin jQuery Une méthode plus simple pour sélectionner plusieurs valeurs d’atsortingbuts possibles? comment définir les valeurs d’entrée de couleur html pour diviser les couleurs au clic

Sélectionnez la dernière ligne d’un paragraphe en utilisant Javascript

Je cherche à créer un effet d’animation sur la dernière ligne d’un paragraphe qui est enveloppé dans une div. Il y a quelques liens dedans donc ça ressemble un peu à ça: 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu dui et erat

Ainsi, quel que soit le dernier saut de ligne lors du chargement de la page, je souhaite sélectionner la dernière ligne avec une étendue pour lui donner l’effet.

J’adorerais ne pas avoir à utiliser jQuery même s’il me faut peut-être …

Essayez d’utiliser .textContent Ssortingng.prototype.split() avec RegExp /\n/ , Array.prototype.slice() avec le paramètre -1 pour sélectionner le dernier caractère de nouvelle ligne, Ssortingng.prototype.replace() pour remplacer le texte sélectionné dans div élément span ayant sélectionné du texte 

 var div = document.getElementById("wrapper"); var text = div.childNodes[0].childNodes[0].textContent.split(/\n/).slice(-1)[0]; div.innerHTML = div.innerHTML.replace(new RegExp("("+text+")"), "$1") 
 div { white-space:pre; } div span { font-size:18px; color: purple; } 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu dui et erat

pendant que vous avez tagué jquery .. ceci est un code jquery .. mais assurez-vous d’inclure jquery en premier 

 var parText = $('#wrapper p').text(); // get text of p var parSplit = parText.split("\n"); // split text by \n var lastLine = parSplit[parSplit.length-1]; // get last line parText.replace(lastLine , ''); // replace last line with nothing $('#wrapper p').append(''+lastLine+''); // append the last line with `lastline` and give it a style you need

DEMO

une autre démo avec effet slideDown