Question

这是我的html结构：

<div class="day">
    <div class="date">
        ...
    </div>
    <div class="event-container">
        <div class="event">...</div>
        <div class="event">...</div>
        ...
        <div class="event">...</div>
    </div>
</div>

我想按.event的内容过滤此结构。如果.event元素中不存在搜索查询中的任何单词，则必须将其隐藏。如果.event中的所有.event-container都被隐藏，则必须隐藏整个.day。

这是我的尝试：

var terms = query.split(" ");

$('.day').each(function() {           //iterate over days
    var matches = false;              //does the day contain a valid event?

    $(this).find('.event').each(function() {   //iterate over events of this day
        var evMatches = true;         //does this event contain all terms?

        $.each(terms, function (index, term) {  //iterate over terms
            if ($(this).text().search(new RegExp(term, "i")) < 0)
                evMatches = false;    //if any term isn't found, element is invalid
        });

        if (evMatches)   //if event contained query
        {
            matches = true;  //day contains valid event
            $(this).show();
        }
        else
            $(this).hide();

    });

    if (matches)  //if day contains valid event
        $(this).show();
    else
        $(this).hide();
});

我得到＆＃34; Uncaught RangeError：超出最大调用堆栈大小＆＃34;。

我认为我在$.each(terms, ...)或$(this).find('event-entry').each(...)做错了，因为我不能很好地理解这些陈述，只是试图通过示例和jquery文档将它们放在一起。

Answer 1

this不是您认为它在terms循环中的内容。它有一个来自each迭代元素的新上下文

您不能在迭代字符串数组的每个循环中使用this。

当你有嵌套循环存储任何this引用时，你知道你正在处理哪个this。

还尝试存储不会改变的值，这样你就不必多次看同样的东西

$('.day').each(function() {          
    var matches = false;             

   var $day = $(this); // store `$(this)` reference

    $day.find('.event').each(function() {   
        var evMatches = true;         

        var $event = $(this), eventText = $event.text();

        $.each(terms, function (index, term) {  
             // use stored text value instead of looking it up each time
            if (eventText.search(new RegExp(term, "i")) < 0)
                evMatches = false;    
        });

        if (evMatches)   //if event contained query
        {
            matches = true;  //day contains valid event
            $event.show();
        }
        else
            $event.hide();

    });

    if (matches)  //if day contains valid event
        $day.show();
    else
       $day.hide();
});

使用jquery过滤嵌套的div

1 个答案: