Question

我正在创建一个WordPress插件来剪切溢出的多行文字并添加＆＃34; ...＆＃34;。它现在非常基本，但我正在使用一些for循环，我只是想知道这是否是在不堵塞资源的情况下最有效的方法。

(function($) {
//Praveen Prasad "HasScrollBar" function adapted http://stackoverflow.com/questions/7341865/checking-if-jquery-is-loaded-using-javascript
$.fn.hasOverflow = function() {
    var elm = $(this);
    var hasOverflow = false; 
    if ( elm.clientHeight < elm.scrollHeight ) {
        hasOverflow = true;
    }
    return hasOverflow;
}
//http://www.mail-archive.com/discuss@jquery.com/msg04261.html
jQuery.fn.reverse = [].reverse;

$(document).ready( function() {

    if (  $('.' + snipClass).length > 0 ) {

        var count = 0;

        for (var i = 0; i < 10000; i++) {
            $('.' + snipClass).each( function () {

                var el = this;

                //Check for overflows
                if ( el.clientHeight < el.scrollHeight) {
                    if ($(this).children().length > 0) { //Handle child elements
                        $("> *", this).reverse().each( function () {
                            for (var j = 0; j < 10000; j++) {  
                                if ( $(this).text() != "" && el.clientHeight < el.scrollHeight ) {
                                    $(this).text($(this).text().substring(0,$(this).text().length - 1));
                                } else {
                                    break;
                                }
                            }  
                        });   
                    } else { //Handle elements with no children
                        $(this).text($(this).text().substring(0,$(this).text().length - 1));
                    }
                } else { //Add '...'
                    count++;
                }

            });

            //Add ... once finished
            if ( count >= $('.' + snipClass).length) {
                $('.' + snipClass).each( function () {
                    var el = this;
                    if ($(this).children().length > 0) { //Handle child elements
                            $("> *", this).reverse().each( function () {
                               if ( $(this).text() != "" ) {
                                   $(this).text($(this).text().substring(0, $(this).text().length - 3) + "...");
                               }
                            });
                        } else { //Handle elements with no children
                            $(this).text($(this).text().substring(0, $(this).text().length - 3) + "...");
                        }
                });
                    break;
            }

        }  
    }
});
}(jQuery));

简要说明：＆＃34; snipClass＆＃34;是插件设置页面中文本字段的值。如果有问题的元素有一个200px的包装器，但它的文本溢出它，我会一直逐字修剪文本，直到它不再溢出为止。我选择使用for循环而不是间隔，因为即使间隔为1秒，您也可以看到文本逐字逐句删除，并且使用for循环它会更快。如果包装器有任何直接子节点（可能是带有

元素的标签），我的插件会以相反的顺序从它们剪切文本，直到没有溢出。

我的文本片段迷你插件是否有效？

0 个答案: