Limitare il numero di caratteri in un div ha class specifica

Ho un set di div che ha un nome di class. Qui voglio controllare / limitare il numero di caratteri da visualizzare nel div in base al nome della class utilizzando javascript.Please aiuto per risolvere questo problema.

Ecco la soluzione jQuery per limitare gli elementi con .myclass a 200 caratteri:

 var myDiv = $('.myclass'); myDiv.text(myDiv.text().substring(0,200)); 

La soluzione JavaScript pura (per tutti i browser che non supportno il getElementByClassname ) sarebbe simile a questa:

 var i; var divs = document.getElementsByTagName('div'); for(i=0;i<divs.length;i++) { if(divs[i].className == 'myclass') { divs[i].innerHTML = divs[i].innerHTML.substring(0,200); } } 

Tieni presente che il metodo JavaScript puro può creare HTML non valido se i div contengono il markup. Il modo corretto sarebbe quello di iterare sui nodes figlio nel div.

Utilizzare il metodo di substring () in javascript,

dettagli sull'utilizzo qui

http://www.w3schools.com/jsref/jsref_substring.asp

in bocca al lupo.

se si utilizza jQuery select dalla class e eseguire il metodo della string secondaria.

una versione che onora elementi figlio esistenti

È venuto attraverso questo Q & A, ma stava cercando qualcosa che gestisse correttamente gli elementi figlio, piuttosto che una semplice fetta di sotto-string. Per coloro che hanno bisogno di questo, ecco quello che ho messo insieme. Fondamentalmente, passeggia recursivamente agli elementi dei figli, ai cloni e li aggiunge a un nuovo contenitore – tutto il tempo che completa il numero di "parole" che trova (ossia contenuto di text diviso in spazi).

http://jsfiddle.net/D8LEx/2/

Una volta raggiunto il suo limite di parola, interromperà l'elaborazione / l'aggiunta di nuovi nodes. Se il contenuto del nodo di text finale viola il limite di parola, il valore del text del nodo viene tagliato per soddisfare il requisito.

Il codice prevede che il nome della class sia l'elemento contenente principalmente nodes di text con altri elementi mescolati. Ad esempio, l' wrapping-element sarebbe l'elemento da destinare:

 <p class="wrapping-element"> Rude alert! An electrical fire has knocked out my voice-receachtion unicycle! Many Wurlitzers are <strong>missing from my database!</strong> <a href="#shop">Abandon shop!</a> This is not a <i>daffodil!</i> </p> 

il codice

Ho cercato di mantenere questo un succinto più ansible, funziona in tutti i browser moderni – soprattutto quelli che supportno getElementsByClassName e cloneNode :

 var wordlimit = (function(){ var clonempty = function( elm ){ var doppel = elm.cloneNode(); doppel.innerHTML = ''; return doppel; }; var wordsmith = function( elm, out, opts ){ var i, l, kids = elm.childNodes, kid, txt, wrd, tnd; for (i=0, l=kids.length; i<l && opts && opts.limit; i++) { if ( (kid = kids[i]) && kid.nodeType === 1 ) { wordsmith( kid, out.appendChild( clonempty(kid) ), opts ); } else if ( kid && kid.nodeType === 3 ) { txt = kid.nodeValue; wrd = txt.replace(/^\s+|\s+$/g, '').split(' '); if ( wrd.length >= opts.limit ) { tnd = document.createTextNode( wrd.slice(0, opts.limit).join(' ') ); out.appendChild( tnd ); opts.limit -= wrd.length; if ( opts.limit < 0 && opts.ellipsis ) { out.appendChild( document.createTextNode('...') ); } opts.limit = 0; } else { opts.limit -= wrd.length; out.appendChild( document.createTextNode(txt) ); } } } return out; } return function(classname, limit, ellipsis){ var i, l, elms = document.getElementsByClassName(classname), elm, out; for (i=0, l=elms.length; i<l; i++) { elm = elms[i]; out = wordsmith( elm, clonempty(elm), { limit: limit, ellipsis: ellipsis }); elm.parentNode.insertBefore( out, elm ); elm.parentNode.removeChild( elm ); } }; })(); 

uso

Chiamare è semplicemente:

 wordlimit(class-name :string, word-limit :int, add-ellipsis :boolean) 

così:

 wordlimit('wrapping-element', 40, true) 

disconoscimento

Quanto sopra potrebbe essere migliorato per supportre i selettori CSS complessi, o semplicemente consentire la fornitura dell'elemento effettivo. La versione corrente support più elementi con il nome della class specificato.

Nota: Questo codice rimuove l'elemento originale e sostituirà con un clone di nuova moda. Poiché il codice si basa su cloneNode , tutti gli ascoltatori di events già presenti verranno persi, come per questo frammento dalla pagina MDN collegata:

La clonazione di un nodo copia tutti i suoi attributi ei loro valori, inclusi gli ascoltatori intrinseci (in linea). Non copia gli ascoltatori degli events aggiunti utilizzando addEventListener () o quelli assegnati alle properties; degli elementi (ad esempio node.onclick = fn).

Va da sé che tutti gli elementi di elementi vivi esistenti sugli elementi modificati da questo codice verranno inoltre interrotti. [Perché allora menzionarlo? Ed.]

Non avevo bisogno di preoccuparsi di mantenere gli elementi esistenti, ma se ne hai bisogno, dovrebbe essere abbastanza semplice riscrivere il codice per lavorare su elementi esistenti; piuttosto che clonare e distruggere.