实时文本搜索jquery，错误的选择器

Live text search jquery, wrong selector?

本文关键字：错误 选择器 jquery 文本 搜索 实时      更新时间：2023-09-26

所以我对这个很陌生，请原谅我:)

这对我来说有点用，这是我的:

HTML: 

<form id="live-search" action="" class="styled" method="post">
<fieldset>
    <input type="text" class="text-input" id="filter" value="" placeholder="Søg efter skole..." />
    <span id="filter-count"></span>
</fieldset>

jQuery: 

$(document).ready(function(){
$("#filter").keyup(function(){
    // Retrieve the input field text and reset the count to zero
    var filter = $(this).val(), count = 0;
    // Loop through the comment list
    $(".ss_voting_manual .ss_voting_entry_list").find("li").each(function(){
        // If the list item does not contain the text phrase fade it out
        if ($(this).text().search(new RegExp(filter, "i")) < 0) {
            $(this).fadeOut();
        // Show the list item if the phrase matches and increase the count by 1
        } else {
            $(this).show();
            count++;
        }
    });
    // Update the count
    var numberItems = count;
    $("#filter-count").text("Klasser fundet = "+count);
});
});

但是当我进行搜索时，它确实找到了li，但是它失去了大部分的样式，如果你看到截图，它会更好地理解，然后我可以在书面上做

 <div id="manual_voting" class="ss_voting_manual">
<ul class="ss_voting_entry_list">
  <li class="my_db_entry item_handle_22924874" id="my_db_entry_22924874" style="">
    <div class="entry_title entry_details">
      <h4>Koge Handelsskole - 3C</h4>
    </div>
    <div class="entry_photo">
      <ol>
        <li style="display: list-item;"><img alt="" src=
        "https://d2ndy3xguswqvu.cloudfront.net/images/220405/22924874/original_89bf1593506cabda8ec9fd63ac6e35d0.png"></li>
      </ol>
    </div>
    <div class="entry_votes entry_details">
      <span class="votes">65</span> Stemmer
    </div>
    <div class="entry_description entry_details ss_preserve_ws"></div>
    <div class="itemActions entry_actions">
      <ul>
        <li class="item_vote" style="display: inline;"><a class="vote_link vote"
        href="#" onclick=
        "SST.vote_for(widget_14972805, 22924874, this); return false;">Stem</a></li>
        <li class="item_share" style="display: inline;"><a class="share_link" href=
        "#" onclick="ss_share(widget_14972805, 22924874); return false;">Del med dine
        venner</a></li>
      </ul>
    </div>
    <div class="clear"></div>
  </li>
  <li class="my_db_entry item_handle_22924821" id="my_db_entry_22924821" style=
  "display: list-item;">
    <div class="entry_title entry_details">
    </div>
    <div class="clear"></div>
  </li>
</ul>
<div class="clear"></div>
<div class="ss_voting_paging" id="paging_voting"></div>

选择器错误

在您的目标代码中，您正在搜索.ss_voting_manual .ss_voting_entry_list下的所有li，包括孙子。

$(".ss_voting_manual .ss_voting_entry_list").find("li")

这将导致您的孙子li 's，包裹img标签的人，被隐藏。

解决方案

将选择器更改为只获取直系后代li:

$(".ss_voting_manual .ss_voting_entry_list").children("li")

或

 $(".ss_voting_manual .ss_voting_entry_list > li")

这将只获取ul之后的第一个li的直接集合。

相关文章：