Блог

Я пытаюсь удалить заголовки jQuery accordion, которые не содержат введенных мной поисковых запросов (скрытия / затухания заголовка достаточно, чтобы «всплывающие» divs не отображались с использованием jQuery accordions, поскольку на заголовок нельзя щелкнуть, и divs никогда не будут установлены в «active»), но я явно делаю что-то не так, поскольку динамически генерируемые заголовки не исчезают, как я ожидаю. Например, если я ищу термин, содержащийся только в последнем генерируемом разделе, предыдущие заголовки и разделы не будут удалены. Это наводит меня на мысль, что проблема явно в $this.closest(".infoDiv").next(".header").fadeIn(); , особенно в «следующей» части, но поскольку я очень неопытен в jQuery, я понятия не имею, как настроить таргетинг только на заголовки divs, не содержащие моего поискового запроса. Я уверен, что это что-то тривиальное, но я не могу понять это, поэтому я был бы признателен за некоторую помощь.

Это форма, которую я использую для ввода моего поискового запроса.

 
    <div class="search-container">
        <form class="form-search">
            <input type="text" class="search-query" placeholder="Search in events...">
            <button type="submit" class="btn">Search</button>
        </form>
    </div>

  

Это динамически генерируемый заголовок и div:

 
<?php if(!empty($results)) {foreach ($results as $row) {?>
    <h3 class = "header"><?php echo $row['society_name']; ?> - <?php echo $row['event_name']; ?> - <?php echo $row['event_date']; ?></h3>
    <div class = "infoDiv">
        <p style ="display:none;"><span class = "data"> <?php echo $row['society_name']; ?> - <?php echo $row['event_name']; ?> - <?php echo $row['event_date']; ?> </span></p>
        <p><img src="addressHere"></p>
        <p><b>Description:</b><span class = "data"><?php echo $row['description']; ?> </span></p>
        <p><b>Schedule:</b><span class = "data"><?php echo $row['schedule']; ?> </span></p>
        <p><b>Location:</b><span class = "data"><?php echo $row['location']; ?> </span></p>
        <p><b>Frequency:</b><span class = "data"><?php echo $row['frequency']; ?> </span></p>
        <p><b>Event Tags:</b><span class = "data"><?php echo $row["GROUP_CONCAT(c.event_tag SEPARATOR ', ')"]; ?> </span></p>
        <span style="display:none;" class="eventId"> <?php echo $row['event_id'] ?> </span>
        <button class="addToList"> Add to My Events List </button>
    </div>
<?php }} ?>

  

И это скрипт jQuery, который я написал:

 
$('.form-search').on('submit',function(){
    return false;
});

$('.form-search .btn').on('click', function(){
    var query = $.trim($(this).prevAll('.search-query').val()).toLowerCase();
    $('div.infoDiv .data').each(function(){
        var $this = $(this);
        if($this.text().toLowerCase().indexOf(query) === -1) {
            $this.closest(".infoDiv").next(".header").fadeOut();
        } else {
            $this.closest(".infoDiv").next(".header").fadeIn();
        }
    });
});

  

* РЕДАКТИРОВАТЬ: это пример того, что генерируется в DOM https://imgur.com/a4XXeWF