Changing The Letters Of A Word Reformat The Whole Html

I have this script that is changing all the letters of a content when you hover them. Actually it changes the whole format of the page and glue all the content. I have been told th

Solution 1:

Basically you need to work with the inner text of the first paragraph and to work inside the inner text of the anchors of the second paragraph, hence you will need to change the selector you use accordingly. .text() glues the inner text of all matching tags, which is the cause of gluing your text. This means that .text() needs to be called on $(this) inside a function callback on the loop of the changed selector. I only needed to do slight changes on your JS code, but the slight changes are important:

functionnextLetter(ch) {
    if (!ch.match(/[a-z]/i)) return ch;
    elseif (ch === 'Z') return'A';
    elseif (ch === 'z') return'a';
    returnString.fromCharCode(ch.charCodeAt(0) + 1);
}
$(document).ready(function(){
  $('.one p, .two p a').each(function() {
      var letters = $(this).text();
      var nHTML = '';
      for(var letter of letters) {
          nHTML+="<span class='x'>"+letter+"</span>";
      }
      $(this).html(nHTML);
      $(".x").hover(function(e) {
          if (e.type === "mouseenter") $(this).text(nextLetter($(this).text()));
      });
})});

Fiddle: https://jsfiddle.net/4e20tpku/

Here I'm assuming that you want to be able to change the letters of vimeo inside the second link of the second paragraph as well. If this assumption is incorrect, then a slight change on the selector I have been using will be needed.

Solution 2:

You probably want something like this:

$(document).ready(function() {
  var paragraphs = $('p');     // select all paragraphs
  paragraphs.each(function() { // loop over themvar letters = $(this).text(); // $(this) accesses the current loop itemvar nHTML = '';
    for (var letter of letters) {
      nHTML += "<span class='x'>" + letter + "</span>";
    }
    $(this).html(nHTML);
  });
  $(".x").hover(function(e) {
    if (e.type === "mouseenter") $(this).text(nextLetter($(this).text()));
  });
})