如何淡出父元素？

Question

我正在尝试创建一个实时滤镜功能。但我无法让它工作。我希望 class 的父项淡出。但到目前为止只有 class 它自己淡出。我不知道我做错了什么。我已经尝试过 .parent 和 .closest('div')。

我会感谢任何帮助来解决这个问题。

HTML:

<form id="live-filter" action=""  method="post">
            <fieldset>
                <input type="text" class="text-input" id="city-filter" value="" />
            </fieldset>
        </form>
        <div class="post">
            <div class="header">
                <h2>Stockholm</h2>
            </div>
            <table>
                <tr>
                    <td>living</td>
                    <td>123</td>
                </tr>
                <tr>
                    <td>bad</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>sov</td>
                    <td>1</td>
                </tr>
            </table>
        </div>
        <div class="post">
            <div class="header">
                <h2>London</h2>
            </div>
            <table>
                <tr>
                    <td>living</td>
                    <td>123</td>
                </tr>
                <tr>
                    <td>bad</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>sov</td>
                    <td>1</td>
                </tr>
            </table>
        </div>
        <div class="post">
            <div class="header">
                <h2>New York</h2>
            </div>
            <table>
                <tr>
                    <td>living</td>
                    <td>123</td>
                </tr>
                <tr>
                    <td>bad</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>sov</td>
                    <td>1</td>
                </tr>
            </table>
        </div>
        <div class="post">
            <div class="header">
                <h2>New york</h2>
            </div>
            <table>
                <tr>
                    <td>living</td>
                    <td>123</td>
                </tr>
                <tr>
                    <td>bad</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>sov</td>
                    <td>1</td>
                </tr>
            </table>
        </div>

CSS:

 .post {
                border: 1px solid;
                width: 200px;
                height: 200px;
                margin-top: 20px;
                margin: 0 auto;
                padding: 20px;
                margin-bottom: 20px;
            }

            .post table {
                margin: 0 auto;
            }

            .header h2 {
                text-align: center;
            }

jQuery:

$(document).ready(function(){
            $("#city-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
                $(".header").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).closest('div').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("Number of posts = "+count);
            });
        });

Answer 1

您需要定位 post 元素，因此

$(this).closest('.post').fadeOut();

$(document).ready(function() {
  $("#city-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
    $(".header").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).parent().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("Number of posts = " + count);
  });
});

.post {
   border: 1px solid;
   width: 200px;
   height: 200px;
   margin-top: 20px;
   margin: 0 auto;
   padding: 20px;
   margin-bottom: 20px;
 }
 .post table {
   margin: 0 auto;
 }
 .header h2 {
   text-align: center;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="live-filter" action="" method="post">
  <fieldset>
    <input type="text" class="text-input" id="city-filter" value="" />
    <span id="filter-count"></span>
  </fieldset>
</form>
<div class="post">
  <div class="header">
    <h2>Stockholm</h2>
  </div>
  <table>
    <tr>
      <td>living</td>
      <td>123</td>
    </tr>
    <tr>
      <td>bad</td>
      <td>1</td>
    </tr>
    <tr>
      <td>sov</td>
      <td>1</td>
    </tr>
  </table>
</div>
<div class="post">
  <div class="header">
    <h2>London</h2>
  </div>
  <table>
    <tr>
      <td>living</td>
      <td>123</td>
    </tr>
    <tr>
      <td>bad</td>
      <td>1</td>
    </tr>
    <tr>
      <td>sov</td>
      <td>1</td>
    </tr>
  </table>
</div>
<div class="post">
  <div class="header">
    <h2>New York</h2>
  </div>
  <table>
    <tr>
      <td>living</td>
      <td>123</td>
    </tr>
    <tr>
      <td>bad</td>
      <td>1</td>
    </tr>
    <tr>
      <td>sov</td>
      <td>1</td>
    </tr>
  </table>
</div>
<div class="post">
  <div class="header">
    <h2>New york</h2>
  </div>
  <table>
    <tr>
      <td>living</td>
      <td>123</td>
    </tr>
    <tr>
      <td>bad</td>
      <td>1</td>
    </tr>
    <tr>
      <td>sov</td>
      <td>1</td>
    </tr>
  </table>
</div>

注意：$(this).parent().fadeOut();应该有效

Answer 2

我稍微修改了一下代码，请检查一下fiddle希望对你有帮助

http://jsfiddle.net/xcbx3at0/1/

$(function() {
  $("#city-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
    $(".header").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).parent().fadeOut();

        // Show the list item if the phrase matches and increase the count by 1
      } else {
        $(this).parent().show();
        count++;
      }
    });

    // Update the count
    var numberItems = count;
    $("#filter-count").text("Number of posts = " + count);
  });
});

.post {
   border: 1px solid;
   width: 200px;
   height: 200px;
   margin-top: 20px;
   margin: 0 auto;
   padding: 20px;
   margin-bottom: 20px;
   display:inline-block

 }
 .post table {
   margin: 0 auto;
 }
 .header h2 {
   text-align: center;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="live-filter" action="" method="post">
  <fieldset>
    <input type="text" class="text-input" id="city-filter" value="" />
    <span id="filter-count"></span>
  </fieldset>
</form>
<div class="post">
  <div class="header">
    <h2>Stockholm</h2>
  </div>
  <table>
    <tr>
      <td>living</td>
      <td>123</td>
    </tr>
    <tr>
      <td>bad</td>
      <td>1</td>
    </tr>
    <tr>
      <td>sov</td>
      <td>1</td>
    </tr>
  </table>
</div>
<div class="post">
  <div class="header">
    <h2>London</h2>
  </div>
  <table>
    <tr>
      <td>living</td>
      <td>123</td>
    </tr>
    <tr>
      <td>bad</td>
      <td>1</td>
    </tr>
    <tr>
      <td>sov</td>
      <td>1</td>
    </tr>
  </table>
</div>
<div class="post">
  <div class="header">
    <h2>New York</h2>
  </div>
  <table>
    <tr>
      <td>living</td>
      <td>123</td>
    </tr>
    <tr>
      <td>bad</td>
      <td>1</td>
    </tr>
    <tr>
      <td>sov</td>
      <td>1</td>
    </tr>
  </table>
</div>
<div class="post">
  <div class="header">
    <h2>New york</h2>
  </div>
  <table>
    <tr>
      <td>living</td>
      <td>123</td>
    </tr>
    <tr>
      <td>bad</td>
      <td>1</td>
    </tr>
    <tr>
      <td>sov</td>
      <td>1</td>
    </tr>
  </table>
</div>

如何淡出父元素？

How to fade out parent element?

jquery

parent

fadeout