Frappe à travers la fonction

Question

Je cherche à travers le contenu sur ma page Web. Une partie du contenu est du texte, d'autres sont des liens, ... et J'ai besoin d'une fonction qui peut simplement passer à travers.

J'ai trouvé cette excellente réponse: How do I animate a strike through effect using JavaScript on a piece of text? (2ème réponse) Mais je veux le transformer en fonction, pour que je puisse l'utiliser un peu partout.

Son jsFiddle d'origine: http://jsfiddle.net/alexdickson/wmBYx/

Voici ses JS:

var findText = function(element, pattern, callback) { 

    if (! element.childNodes) { 
     return; 
    } 
    for (var childi = element.childNodes.length; childi-- > 0;) { 
     var child = element.childNodes[childi]; 
     if (child.nodeType == 1) { 
      findText(child, pattern, callback); 
     } else if (child.nodeType == 3) { 
      var matches = []; 
      var match; 
      while (match = pattern.exec(child.data)) 
      matches.push(match); 
      for (var i = matches.length; i-- > 0;) 
      callback.call(window, child, matches[i]); 
     } 
    } 
} 


findText(document.body, /./g, function(node, match) { 
    var element = document.createElement('span'); 
    node.splitText(match.index + 1); 
    element.appendChild(node.splitText(match.index)); 
    node.parentNode.insertBefore(element, node.nextSibling); 
}); 

var spans = document.getElementsByTagName('span'), 
    spansLength = spans.length, 
    currentSpan = 0, 
    interval = setInterval(function() { 
     if (currentSpan == spansLength) { 
      clearInterval(interval); 
     } 
     spans[currentSpan++].style.textDecoration = 'line-through'; 

    }, 100); 

Pour vous dire la vérité, je ne comprends pas tout ça, donc je n'ai aucune idée comment je peux transformer cette dans une fonction DRY. (Je ne vais même pas vous montrer ce que j'ai eu jusqu'ici, j'ai honte).

Merci pour votre aide

PS: J'utilise jquery, vous êtes plus que bienvenus pour ajouter un peu en elle.

Answer 1

Vous pouvez créer un plugin jQuery pour elle:

$.fn.strikeThrough = (function() { 

    var findText = function(element, pattern, callback) { 

     if (! element.childNodes) { 
      return; 
     } 

     for (var childi = element.childNodes.length; childi-- > 0;) { 
      var child = element.childNodes[childi]; 
      if (child.nodeType == 1) { 
       findText(child, pattern, callback); 
      } else if (child.nodeType == 3) { 
       var matches = []; 
       var match; 
       while (match = pattern.exec(child.data)) 
       matches.push(match); 
       for (var i = matches.length; i-- > 0;) 
       callback.call(window, child, matches[i]); 
      } 
     } 
    } 

    return function(pattern) { 
     pattern = pattern || /./g; 

     if (this.length > 1) { 
      this.each(function() { 
       $(this).strikeThrough(pattern); 
      }); 
      return this; 
     } 

     findText(document.body, pattern, function(node, match) { 
      var element = document.createElement('span'); 
      node.splitText(match.index + 1); 
      element.appendChild(node.splitText(match.index)); 
      node.parentNode.insertBefore(element, node.nextSibling); 
     }); 

     var spans = this[0].getElementsByTagName('span'), 
      spansLength = spans.length, 
      currentSpan = 0, 
      interval = setInterval(function() { 
       if (currentSpan == spansLength) { 
        clearInterval(interval); 
        return; 
       } 
       spans[currentSpan++].style.textDecoration = 'line-through'; 

      }, 100); 

     return this; 
    }; 

})(); 

$(function() { 
    $('div').strikeThrough(); 
}); 

HTML:

<div>strike me out please but <strong>don't</strong> drop my events!</div> 

Demo

Answer 2

C'est incroyablement simple.

$(function(){ 
    //pass over the jQuery object. 
    strikeThrough($('.ele')); 
}); 

/* 
* Create function outside of .ready() scope 
*/ 
function strikeThrough(ele){ 
    ele.css('textDecoration', 'line-through'); 
} 

And here is the working jsFiddle example.