javascript - 从 jquery 函数中排除类时出现问题

Question

我有一个基于 shuffleLetters.js 的打乱字母的函数。它工作得很好，但我似乎无法排除嵌套在我的目标类中的类。

所以我想打乱菜单项中的字符。所以我给他们一个 .shuffle 类并像这样调用函数:

$(function(){
    var container = $(".shuffle")
    container.shuffleLetters();
});

.shuffleLetters 使用插件的位置。问题是它扰乱了嵌套在该菜单项中的所有字符，这是我不想要的。

我已阅读有关 .not 方法的信息，但无法使其正常工作。

这就是我正在尝试的:

<li class="shuffle">title
    <li class="no-shuffle">sub-title
    </li>
</li>

然后我像这样编写我的js(或每个可能的变体):

$(function(){
    var container = $(".shuffle").not('.no-shuffle')
    container.shuffleLetters();
});

但这不起作用。

谁能帮我指出正确的方向，我绞尽脑汁花了几个小时。

一如既往，提前致谢!

编辑:这是shuffleLetters.js:

(function($){

    $.fn.shuffleLetters = function(prop){

        var options = $.extend({
            "step"      : 8,            // How many times should the letters be changed
            "fps"       : 25,           // Frames Per Second
            "text"      : "",           // Use this text instead of the contents
            "callback"  : function(){}  // Run once the animation is complete
        },prop)

        return this.each(function(){

            var el = $(this),
                str = "";


            // Preventing parallel animations using a flag;

            if(el.data('animated')){
                return true;
            }

            el.data('animated',true);


            if(options.text) {
                str = options.text.split('');
            }
            else {
                str = el.text().split('');
            }

            // The types array holds the type for each character;
            // Letters holds the positions of non-space characters;

            var types = [],
                letters = [];

            // Looping through all the chars of the string

            for(var i=0;i<str.length;i++){

                var ch = str[i];

                if(ch == " "){
                    types[i] = "space";
                    continue;
                }
                else if(/[a-z]/.test(ch)){
                    types[i] = "lowerLetter";
                }
                else if(/[A-Z]/.test(ch)){
                    types[i] = "upperLetter";
                }
                else {
                    types[i] = "symbol";
                }

                letters.push(i);
            }

            el.html("");            

            // Self executing named function expression:

            (function shuffle(start){

                // This code is run options.fps times per second
                // and updates the contents of the page element

                var i,
                    len = letters.length, 
                    strCopy = str.slice(0); // Fresh copy of the string

                if(start>len){

                    // The animation is complete. Updating the
                    // flag and triggering the callback;

                    el.data('animated',false);
                    options.callback(el);
                    return;
                }

                // All the work gets done here
                for(i=Math.max(start,0); i < len; i++){

                    // The start argument and options.step limit
                    // the characters we will be working on at once

                    if( i < start+options.step){
                        // Generate a random character at thsi position
                        strCopy[letters[i]] = randomChar(types[letters[i]]);
                    }
                    else {
                        strCopy[letters[i]] = "";
                    }
                }

                el.text(strCopy.join(""));

                setTimeout(function(){

                    shuffle(start+1);

                },1000/options.fps);

            })(-options.step);


        });
    };

    function randomChar(type){
        var pool = "";

        if (type == "lowerLetter"){
            pool = "abcdefghijklmnopqrstuvwxyz0123456789";
        }
        else if (type == "upperLetter"){
            pool = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
        }
        else if (type == "symbol"){
            pool = ",.?/\\(^)![]{}*&^%$#'\"";
        }

        var arr = pool.split('');
        return arr[Math.floor(Math.random()*arr.length)];
    }

})(jQuery);

Answer 1

尝试将文本节点“title”包装在span元素内的.shuffle li中

(function($){

    $.fn.shuffleLetters = function(prop){

        var options = $.extend({
            "step"      : 8,            // How many times should the letters be changed
            "fps"       : 25,           // Frames Per Second
            "text"      : "",           // Use this text instead of the contents
            "callback"  : function(){}  // Run once the animation is complete
        },prop)

        return this.each(function(){

            var el = $(this),
                str = "";


            // Preventing parallel animations using a flag;

            if(el.data('animated')){
                return true;
            }

            el.data('animated',true);


            if(options.text) {
                str = options.text.split('');
            }
            else {
                str = el.text().split('');
            }

            // The types array holds the type for each character;
            // Letters holds the positions of non-space characters;

            var types = [],
                letters = [];

            // Looping through all the chars of the string

            for(var i=0;i<str.length;i++){

                var ch = str[i];

                if(ch == " "){
                    types[i] = "space";
                    continue;
                }
                else if(/[a-z]/.test(ch)){
                    types[i] = "lowerLetter";
                }
                else if(/[A-Z]/.test(ch)){
                    types[i] = "upperLetter";
                }
                else {
                    types[i] = "symbol";
                }

                letters.push(i);
            }

            el.html("");            

            // Self executing named function expression:

            (function shuffle(start){

                // This code is run options.fps times per second
                // and updates the contents of the page element

                var i,
                    len = letters.length, 
                    strCopy = str.slice(0); // Fresh copy of the string

                if(start>len){

                    // The animation is complete. Updating the
                    // flag and triggering the callback;

                    el.data('animated',false);
                    options.callback(el);
                    return;
                }

                // All the work gets done here
                for(i=Math.max(start,0); i < len; i++){

                    // The start argument and options.step limit
                    // the characters we will be working on at once

                    if( i < start+options.step){
                        // Generate a random character at thsi position
                        strCopy[letters[i]] = randomChar(types[letters[i]]);
                    }
                    else {
                        strCopy[letters[i]] = "";
                    }
                }

                el.text(strCopy.join(""));

                setTimeout(function(){

                    shuffle(start+1);

                },1000/options.fps);

            })(-options.step);


        });
    };

    function randomChar(type){
        var pool = "";

        if (type == "lowerLetter"){
            pool = "abcdefghijklmnopqrstuvwxyz0123456789";
        }
        else if (type == "upperLetter"){
            pool = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
        }
        else if (type == "symbol"){
            pool = ",.?/\\(^)![]{}*&^%$#'\"";
        }

        var arr = pool.split('');
        return arr[Math.floor(Math.random()*arr.length)];
    }

})(jQuery);

$(function() {
    var container = $(".shuffle span:first")
    container.shuffleLetters();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<ul>
<li class="shuffle"><span>title</span>
  <ul>
    <li class="no-shuffle">sub-title
    </li>
    </ul>
</li>
</ul>