Question

我试图在JQuery的每个循环中执行while循环，但它会导致页面崩溃。这段代码可以用另一种方式编写吗？我想要做的是在多行文本中多行文本溢出时添加省略号。

HTML

<div class="three-col-three-img-txt">
    <div class="txt-block">
        <div class="txt-entries">
            <div class="txt-entries-wrap">
                <p>Lorem ipsum</p>
            </div>
        </div>
    </div>
    <div class="txt-block">
        <div class="txt-entries">
            <div class="txt-entries-wrap">
                <p>Lorem ipsum</p>
            </div>
        </div>
    </div>
    <div class="txt-block">
        <div class="txt-entries">
            <div class="txt-entries-wrap">
                <p>Lorem ipsum</p>
            </div>
        </div>
    </div>
</div>

JQUERY

$( ".three-col-three-img-txt .txt-block" ).each(function() {
    var ph = $(this).find('.txt-entries .txt-entries-wrap');
    var p = $(this).find('.txt-entries .txt-entries-wrap p');
    var divh = $(this).find('.txt-entries').height();
    while ($(ph).outerHeight() > divh) {
         $(p).text(function (index, text) {
              return text.replace(/\W*\s(\S)*$/, '...');
         });
    }
});

Answer 1

好像你需要遍历每个.txt-block，然后循环遍历每个.txt-entries ..如果你需要这样做：

$(document).ready(function(){
    $( ".txt-block").each(function() {
        $(this).find('.txt-entries').each(function() {
            var ph = $(this).find('.txt-entries-wrap');
            var p = $(this).find('.txt-entries-wrap p');
            var divh = $(this).height();
            if ($(ph).outerHeight() > divh) {
                $(p).text(function (index, text) {
                     return text.replace(/\W*\s(\S)*$/, '...');
                });
            }
        });
    });
});

Answer 2

您不需要while循环，因为这是您的.each()函数正在执行的操作 - 它逐个遍历每个.three-col-three-img-text .txt-block。

而是尝试使用IF语句：

if( $(ph).outerHeight() > divh ){
     $(p).text(function (index, text) {
          return text.replace(/\W*\s(\S)*$/, '...');
     });
}

或者 - 如果您正在尝试完成的任务是循环遍历每个.txt-entries .txt-entries-wrap，您应该再次使用.each()函数，如下所示：

$(ph).each(function(){
    if($(this).outerHeight() > divh) {
        //do stuff
    }
});

while循环在每个循环内导致页面崩溃

2 个答案: