JQuery在迭代长度之后隐藏相同数据类型的可见元素

Question

在此先感谢您的帮助。

我正试图用按钮过滤一些元素。在任何时候都不能有超过2个元素。我需要按数据类型过滤它们。

在这种情况下，我想用data-type =“news”显示前2个元素，然后隐藏其余元素。

<div class="sq-list">
<div style="display: inline-block;">
    <div class="ava-tbig">
        <div class="ava-tnews" data-type="news">
            <div class="ava-tnewsimg" style="background: url('');"></div>
            <div class="ava-tnewstitle">
                <div class="ava-tnewsh1">Title</div>
            </div>
        </div>
    </div>
</div>
<div style="display: inline-block;">
    <div class="ava-tbig">
        <div class="ava-tnews" data-type="feature">
            <div class="ava-tnewsimg" style="background: url('');"></div>
            <div class="ava-tnewstitle">
                <div class="ava-tnewsh1">Title</div>
            </div>
        </div>
    </div>
</div>
<div style="display: inline-block;">
    <div class="ava-tbig">
        <div class="ava-tnews" data-type="feature">
            <div class="ava-tnewsimg" style="background: url('');"></div>
            <div class="ava-tnewstitle">
                <div class="ava-tnewsh1">Title</div>
            </div>
        </div>
    </div>
</div>
<div style="display: none;">
    <div class="ava-tbig">
        <div class="ava-tnews" data-type="news">
            <div class="ava-tnewsimg" style="background: url('');"></div>
            <div class="ava-tnewstitle">
                <div class="ava-tnewsh1">Title</div>
            </div>
        </div>
    </div>
</div>
<div style="display: none;">
    <div class="ava-tbig">
        <div class="ava-tnews" data-type="news">
            <div class="ava-tnewsimg" style="background: url('');"></div>
            <div class="ava-tnewstitle">
                <div class="ava-tnewsh1">Title</div>
            </div>
        </div>
    </div>
</div>

jQuery的：

$('.sq-filter-link--news').on('click', function(e){
    $('.sq-list > div').each(function(index){

        if($(this).children().children().data('type') ==  'news' && index >= 6) {
            $(this).hide();

        }
    });
});

任何帮助都感激不尽。

Answer 1

在.each()循环...你首先必须找到具有data-type的元素...因为循环是由一个相当遥远的父亲制作的。然后比较“类型”并使用计数器。

请参阅代码中的注释。

$('.sq-filter-link--news').on('click', function(e) {

  var maxNewsFilter = 2;
  var count = 0;
  
  // Lopping throught some parent <div>
  $('.sq-list > div').each(function() {

    // find the element having a data-type attribute
    var dataType = $(this).find("[data-type]");
    
    // Compare the value
    if (dataType.data("type") == 'news') {
    
      // Count this one, because it is a "news"
      count++;
      
      // If the count is higher than the max, hide!
      if (count > maxNewsFilter) {
        $(this).hide();  // $(this) is the "quite distant" parent to hide...
      }
    }
    
    // This else loop will hide the "feature" items
    else{
      $(this).hide();
    }
  });
});

/* Some demo basic styling... */
.ava-tbig {
  padding: 1em;
  border: 1px solid black;
}
[data-type='news']{
  background-color:yellow;
}
[data-type='feature']{
  background-color:cyan;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="sq-filter-link--news">Filter News</button><br>
<br>
<div class="sq-list">
  <div>
    <div class="ava-tbig">
      <div class="ava-tnews" data-type="news">
        <div class="ava-tnewsimg" style="background: url('');"></div>
        <div class="ava-tnewstitle">
          <div class="ava-tnewsh1">(news) Title 1</div>
        </div>
      </div>
    </div>
  </div>
  <div>
    <div class="ava-tbig">
      <div class="ava-tnews" data-type="feature">
        <div class="ava-tnewsimg" style="background: url('');"></div>
        <div class="ava-tnewstitle">
          <div class="ava-tnewsh1">(feature) Title 1</div>
        </div>
      </div>
    </div>
  </div>
  <div>
    <div class="ava-tbig">
      <div class="ava-tnews" data-type="feature">
        <div class="ava-tnewsimg" style="background: url('');"></div>
        <div class="ava-tnewstitle">
          <div class="ava-tnewsh1">(feature) Title 2</div>
        </div>
      </div>
    </div>
  </div>
  <div>
    <div class="ava-tbig">
      <div class="ava-tnews" data-type="news">
        <div class="ava-tnewsimg" style="background: url('');"></div>
        <div class="ava-tnewstitle">
          <div class="ava-tnewsh1">(news) Title 2</div>
        </div>
      </div>
    </div>
  </div>
  <div>
    <div class="ava-tbig">
      <div class="ava-tnews" data-type="news">
        <div class="ava-tnewsimg" style="background: url('');"></div>
        <div class="ava-tnewstitle">
          <div class="ava-tnewsh1">(news) Title 3</div>
        </div>
      </div>
    </div>
  </div>