单击显示前3个元素

时间：2017-07-14 06:48:59

标签： jquery html

我有列表透视列表项Blogs，Case_Studies，白皮书与各自的类。单击列表项，它显示'.page-perspective'中的相应元素ie。如果我点击博客它只显示博客和隐藏其他如果我点击白皮书它只显示白皮书并隐藏其他。在白皮书中我有四个'.page-perspective'。我想要显示前三个白皮书'.page-perspective'

(function($) {
  function perspective_type() {
    $(".perspective-list a").click(function(e) {
      e.preventDefault();
      $(".perspective-list a").parent().removeClass('active');
      $('.wrapper .page-perspective').show();
      var href = $(this).attr('href');
      $('.wrapper > :not(.' + href + ')').hide();
      $('.wrapper > .' + href + '').show();
      $(this).parent().addClass('active');
    });
    $(".perspective-list a").mouseover(
      function() {
        $(".perspective-list a").removeClass('hover');
        $(this).parent().addClass('hover');
      });
    $(".perspective-list a").mouseout(
      function() {
        $(".perspective-list a").each(function() {
          $(this).parent().removeClass('hover');
        });
      });
    $('#perspectives .perspectiveReadurl', '#page_perspectives .perspectiveReadurl').find('a').attr('target', '_blank');
  }
  jQuery(document).ready(function($) {
var href= 'Whitepapers'; 
jQuery('.perspective-list a.'+href+'').parent().addClass('active');
$('.wrapper > .'+href+'').show();
jQuery('.wrapper > :not(.'+href+')').hide();
    perspective_type();
  });

})(jQuery)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page_perspectives">
  <div class="view view-page-perspectives view-id-page_perspectives">
    <div class="perspective-list">
      <ul class="nav nav-justified">
        <li class="">
          <a class="Blogs" href="Blogs">Blogs</a>
        </li>
        <li>
          <a class="Case_Studies" href="Case_Studies">Case Studies</a>
        </li>
        <li class="">
          <a class="Whitepapers" href="Whitepapers">Whitepapers</a>
        </li>
      </ul>
    </div>
    <div class="view-content">
      <div class="views-row views-row-1 views-row-odd views-row-first">
        <div class="wrapper">
          <div class="page-perspective row Whitepapers" style="display: block;">
            Whitepaper 1
          </div>
        </div>
      </div>
      <div class="views-row views-row-2 views-row-even">
        <div class="wrapper">
          <div class="page-perspective row Blogs" style="display: none;">
            Blogs 1
          </div>
        </div>
      </div>
      <div class="views-row views-row-3 views-row-odd">
        <div class="wrapper">
          <div class="page-perspective row Whitepapers" style="display: block;">
            Whitepaper 2
          </div>
        </div>
      </div>
      <div class="views-row views-row-4 views-row-even">
        <div class="wrapper">
          <div class="page-perspective row Case_Studies" style="display: none;">
            Case study 1
          </div>
        </div>
      </div>
      <div class="views-row views-row-5 views-row-odd">
        <div class="wrapper">
          <div class="page-perspective row Blogs" style="display: none;">
            Blogs 2
          </div>
        </div>
      </div>
      <div class="views-row views-row-6 views-row-even">
        <div class="wrapper">
          <div class="page-perspective row Whitepapers" style="display: block;">
            Whitepaper 3
          </div>
        </div>
      </div>
      <div class="views-row views-row-7 views-row-odd views-row-last">
        <div class="wrapper">
          <div class="page-perspective row Whitepapers" style="display: block;">
            Whitepaper 4
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

2 个答案:

答案 0 :(得分：2)

您可以使用.slice(0,3)仅显示jQuery选择器的前三个结果：

(function($) {
  function perspective_type() {
    $(".perspective-list a").click(function(e) {
      e.preventDefault();
      $(".perspective-list a").parent().removeClass('active');
      $('.wrapper .page-perspective').slice(0,3).show();
      var href = $(this).attr('href');
      $('.wrapper > :not(.' + href + ')').hide();
      $('.wrapper > .' + href + '').slice(0,3).show();
      $(this).parent().addClass('active');
    });
    $(".perspective-list a").mouseover(
      function() {
        $(".perspective-list a").removeClass('hover');
        $(this).parent().addClass('hover');
      });
    $(".perspective-list a").mouseout(
      function() {
        $(".perspective-list a").each(function() {
          $(this).parent().removeClass('hover');
        });
      });
    $('#perspectives .perspectiveReadurl', '#page_perspectives .perspectiveReadurl').find('a').attr('target', '_blank');
  }
  jQuery(document).ready(function($) {
    $('.Whitepapers').slice(0,4).show();
    perspective_type();
  });

})(jQuery)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page_perspectives">
  <div class="view view-page-perspectives view-id-page_perspectives">
    <div class="perspective-list">
      <ul class="nav nav-justified">
        <li class="">
          <a class="Blogs" href="Blogs">Blogs</a>
        </li>
        <li>
          <a class="Case_Studies" href="Case_Studies">Case Studies</a>
        </li>
        <li class="active">
          <a class="Whitepapers" href="Whitepapers">Whitepapers</a>
        </li>
      </ul>
    </div>
    <div class="view-content">
      <div class="views-row views-row-1 views-row-odd views-row-first">
        <div class="wrapper">
          <div class="page-perspective row Whitepapers" style="display: none;">
            Whitepaper 1
          </div>
        </div>
      </div>
      <div class="views-row views-row-2 views-row-even">
        <div class="wrapper">
          <div class="page-perspective row Blogs" style="display: none;">
            Blogs 1
          </div>
        </div>
      </div>
      <div class="views-row views-row-3 views-row-odd">
        <div class="wrapper">
          <div class="page-perspective row Whitepapers" style="display: none;">
            Whitepaper 2
          </div>
        </div>
      </div>
      <div class="views-row views-row-4 views-row-even">
        <div class="wrapper">
          <div class="page-perspective row Case_Studies" style="display: none;">
            Case study 1
          </div>
        </div>
      </div>
      <div class="views-row views-row-5 views-row-odd">
        <div class="wrapper">
          <div class="page-perspective row Blogs" style="display: none;">
            Blogs 2
          </div>
        </div>
      </div>
      <div class="views-row views-row-6 views-row-even">
        <div class="wrapper">
          <div class="page-perspective row Whitepapers" style="display: none;">
            Whitepaper 3
          </div>
        </div>
      </div>
      <div class="views-row views-row-7 views-row-odd views-row-last">
        <div class="wrapper">
          <div class="page-perspective row Whitepapers" style="display: none;">
            Whitepaper 4
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

答案 1 :(得分：1)

您可以使用：lt和：gt jquery规则来限制选择器。 例如，如何获得具有类Whitepapers的前3个元素：

$('.Whitepapers:lt(3)')

接下来的3个要素：

$('.Whitepapers:lt(6):gt(2)')
相关问题
最新问题