Setting 'font-size' with jQuery not working on last element of the selected Text

Question

I am trying to change the font-size of all the selected text. It works fine but I am not able to change the font of last element in the array.

Below is my code:

 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script> $(document).ready(function(){ $('span').mouseup(function(){ var range = window.getSelection().getRangeAt(0); content = range.cloneContents(); var select = content.querySelectorAll('span'); updateFont(select); }); }); function updateFont(selectedText){ var spans = document.getElementsByTagName('span'); for( i=0;i < spans.length;i++){ for( j=0;j < selectedText.length;j++){ var id = spans[i].id; var selectedId = selectedText[j].id; var text = spans[i].innerHTML; var selectedinnerText = selectedText[j].innerHTML; if(i === spans.length-1) { checkLast(id,text,selectedText); } if(id === selectedId){ if(text === selectedinnerText){ $("#"+id).css("font-size",10+"px"); } } } } } function checkLast(id,text,selectedText) { for( j=0;j < selectedText.length;j++){ var selectedId = selectedText[j].id; var selectedinnerText = selectedText[j].innerHTML; alert(id + " " + selectedId + " " + selectedinnerText + " " + text); if(id === selectedId){ if(text === selectedinnerText){ $("#"+id).css("font-size",10+"px"); } } } } </script> </head> <body> <span style="font-size:40px" id="one1">Hi tTheee</span> <span style="font-size:20px" id="one2">hello</span> <span style="font-size:20px" id="one3">sdsds </span> <p></p> </body> </html>

Answer 1

it's because your last element has a space at the end of it.

Change: if(text === selectedinnerText){

To:

if(text.trim() === selectedinnerText.trim()){ //eliminate spaces before and after the text, incase the highlighting goes over the element.

 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script> $(document).ready(function(){ $('span').mouseup(function(){ var range = window.getSelection().getRangeAt(0); content = range.cloneContents(); var select = content.querySelectorAll('span'); updateFont(select); }); }); function updateFont(selectedText){ var spans = document.getElementsByTagName('span'); for( i=0;i < spans.length;i++){ for( j=0;j < selectedText.length;j++){ var id = spans[i].id; var selectedId = selectedText[j].id; var text = spans[i].innerHTML; var selectedinnerText = selectedText[j].innerHTML; if(i === spans.length-1) { checkLast(id,text,selectedText); } if(id === selectedId){ if(text.trim() === selectedinnerText.trim()){ $("#"+id).css("font-size",10+"px"); } } } } } function checkLast(id,text,selectedText) { for( j=0;j < selectedText.length;j++){ var selectedId = selectedText[j].id; var selectedinnerText = selectedText[j].innerHTML; alert(id + " " + selectedId + " " + selectedinnerText + " " + text); if(id === selectedId){ if(text.trim() === selectedinnerText.trim()){ $("#"+id).css("font-size",10+"px"); } } } } </script> </head> <body> <span style="font-size:40px" id="one1">Hi tTheee</span> <span style="font-size:20px" id="one2">hello</span> <span style="font-size:20px" id="one3">sdsds </span> <p></p> </body> </html>

Setting 'font-size' with jQuery not working on last element of the selected Text

Question

1 answers

solution1
2 ACCPTED 2016-04-09 08:16:40

Setting 'font-size' with jQuery not working on last element of the selected Text

Question

1 answers

solution1 2 ACCPTED 2016-04-09 08:16:40

solution1
2 ACCPTED 2016-04-09 08:16:40