Repeat Javascript result for each Array Div

user_10869163 0
Viewed 67

I have scanned stackoverflow all over for a solution regarding my query and resulted in posting a question. Please could someone assist me, my skill sets sit in PHP and I am not 100% fluent in JS/jQuery.

My code below allows for the div text to be shorted if more than 8 characters.

<div id="theText">Very long text here</div>

<script>
function cutString(id){    
     var text = document.getElementById(id).innerHTML;         
     var charsToCutTo = 8;
        if(text.length>charsToCutTo){
            var strShort = "";
            for(i = 0; i < charsToCutTo; i++){
                strShort += text[i];
            }
            document.getElementById(id).title = "text";
            document.getElementById(id).innerHTML = strShort + "...";
        }            
     };
cutString('theText'); 
</script>

However I am now trying to do this on multiple Div as per the below code, I think the method I should be using is arrays, below is a none working version but the concept where I am looking for guidance.

Any help is appreciated.

<div id="theText[]">Very long text here</div> 
<div id="theText[]">Even more long text here</div> 

<script>
function cutString(id){    
     var text = document.getElementById(id).innerHTML;         
     var charsToCutTo = 8;
        if(text.length>charsToCutTo){
            var strShort = "";
            for(i = 0; i < charsToCutTo; i++){
                strShort += text[i];
            }
            document.getElementById(id).title = "text";
            document.getElementById(id).innerHTML = strShort + "...";
        }            
     };
cutString('theText[]'); 
</script>
jquery javascript
2 Answers

I think Ken Lee answered the question correctly, but I think OP is wanting to take a more dynamic approach, in which case I'd recommend moving away from IDs and into classes as they (classes) lend themselves better to iteration, as shown below:

<div class="longText">Very long text here</div>
<div class="longText">Very long text here as well</div>
<div class="longText">And the text here is even longer</div>
<script>
function cutString(element){    
     var text = element.innerText; // We fetch innerText to omit any HTML from the length check       
     var charsToCutTo = 8;
     if(text.length>charsToCutTo){
         var strShort = "";
         for(i = 0; i < charsToCutTo; i++){
             strShort += text[i];
         }
         element.title = text; // we set the value of title to allow tooltip hovering of full text
         element.innerText = strShort + "...";
     }            
}

var longTextElems = document.getElementsByClassName('longText'); // This will return a collection of HTML elements
console.log(longTextElems.length);
for(count = 0; count < longTextElems.length; count++) {
    cutString(longTextElems.item(count));
}
</script>

I've included a JSFiddle

Alternatively, if you are looking for basic width-based elipsis, CSS3 already caters for this: Ellipsis Overflow

user_16639250

One of the methods is to specify the index of the array (0,1,2...)

So in your case, you have theText[0] and theText[1] to process.

This is the code which is working:

<div id="theText[0]">Very long text here</div> 
<div id="theText[1]">Even more long text here</div> 

<script>
function cutString(id){    
     var text = document.getElementById(id).innerHTML;         
     var charsToCutTo = 8;
        if(text.length>charsToCutTo){
            var strShort = "";
            for(i = 0; i < charsToCutTo; i++){
                strShort += text[i];
            }
            document.getElementById(id).title = "text";
            document.getElementById(id).innerHTML = strShort + "...";
        }            
     };
cutString('theText[0]'); 
cutString('theText[1]'); 
</script>
user_118549860
Related