Question

我试图在显示两行后隐藏行。

  $(window).load(function () {
  $(".ThisClass> div").next().next().css('visibility','hidden');
  })

我可以使用上面的代码完成它但我想要做的是隐藏两行之后的所有行。上面的代码仅在有3行时才有效。

请建议。

Answer 1

您可以使用nextAll()功能。

首先使用.eq(1)（基于零的索引）定位第二个元素，并使用.nextAll()将任何css分配给所选元素的以下兄弟：

＆＃13;

$('#hide').on('click', function() {
   $('#test > .inner').eq(1).nextAll().hide();
});

＆＃13;

#test {
  width:100%;
}
.inner {
  width:100%;
  float:left;
  padding:5px;
  border:1px solid #d8d8d8;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="test">
  <div class="inner">test</div>
  <div class="inner">test</div>
  <div class="inner">test</div>
  <div class="inner">test</div>
  <div class="inner">test</div>
  <div class="inner">test</div>
  <div class="inner">test</div>
</div>
<button id="hide">Hide rows</button>

＆＃13;

Answer 2

使用 slice() 函数非常简单。

＆＃13;

$(document).ready(function(){
    $(".ThisClass> div").slice(2).hide();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="ThisClass">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

＆＃13;

Answer 3

尝试使用:gt(index) Selector

$(function() {
  $(".ThisClass > div:gt(1)").css("visibility", "hidden");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>

<body>
  <div class="ThisClass">
    <div>abc</div>
    <div>def</div>
    <div>ghi</div>
    <div>jkl</div>
    <div>mno</div>
  </div>
</body>

Answer 4

只需修改你的css选择器并隐藏所有行。

Assertion failure in -[ChatMessagesController collectionView:cellForItemAtIndexPath:], /Users/Neelacharya/Harshit/LIve Projects/Project/V1/Source/Project/Pods/JSQMessagesViewController/JSQMessagesViewController/Controllers/JSQMessagesViewController.m:452

Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'Invalid parameter not satisfying: messageSenderId != nil'

*** First throw call stack:
(
    0   CoreFoundation                      0x000000011161ca75 __exceptionPreprocess + 165
    1   libobjc.A.dylib                     0x00000001112b1bb7 objc_exception_throw + 45
    2   CoreFoundation                      0x000000011161c8da +[NSException raise:format:arguments:] + 106
    3   Foundation                          0x000000010edcfb6f -[NSAssertionHandler handleFailureInMethod:object:file:lineNumber:description:] + 195
    4   CinchGaming                         0x000000010d7be3c5 -[JSQMessagesViewController collectionView:cellForItemAtIndexPath:] + 693
    5   CinchGaming                         0x000000010d7f5f6d -[XBMessageViewController collectionView:cellForItemAtIndexPath:] + 141
    6   UIKit                               0x00000001102b9fab -[UICollectionView _createPreparedCellForItemAtIndexPath:withLayoutAttributes:applyAttributes:] + 244
    7   UIKit                               0x00000001102bb6e4 -[UICollectionView _updateVisibleCellsNow:] + 3445
    8   UIKit                               0x00000001102bf391 -[UICollectionView layoutSubviews] + 243
    9   UIKit                               0x000000010fd041c3 -[UIView(CALayerDelegate) layoutSublayersOfLayer:] + 521
    10  QuartzCore                          0x000000010f9d2c58 -[CALayer layoutSublayers] + 150
    11  QuartzCore                          0x000000010f9c787e _ZN2CA5Layer16layout_if_neededEPNS_11TransactionE + 380
    12  QuartzCore                          0x000000010f9c76ee _ZN2CA5Layer28layout_and_display_if_neededEPNS_11TransactionE + 24
    13  QuartzCore                          0x000000010f93536e _ZN2CA7Context18commit_transactionEPNS_11TransactionE + 242
    14  QuartzCore                          0x000000010f936482 _ZN2CA11Transaction6commitEv + 390
    15  QuartzCore                          0x000000010f936aed _ZN2CA11Transaction17observer_callbackEP19__CFRunLoopObservermPv + 89
    16  CoreFoundation                      0x0000000111551507 __CFRUNLOOP_IS_CALLING_OUT_TO_AN_OBSERVER_CALLBACK_FUNCTION__ + 23
    17  CoreFoundation                      0x0000000111551460 __CFRunLoopDoObservers + 368
    18  CoreFoundation                      0x0000000111547293 __CFRunLoopRun + 1123
    19  CoreFoundation                      0x0000000111546bc6 CFRunLoopRunSpecific + 470
    20  GraphicsServices                    0x0000000112796a58 GSEventRunModal + 161
    21  UIKit                               0x000000010fc8a580 UIApplicationMain + 1282
    22  CinchGaming                         0x000000010d67e463 main + 115
    23  libdyld.dylib                       0x0000000111b4e145 start + 1
    24  ???                                 0x0000000000000001 0x0 + 1
)
libc++abi.dylib: terminating with uncaught exception of type NSException

function hiderows() {
  $('.ThisClass > div:nth-child(n+3)').hide();
}

function showrows() {
  $('.ThisClass > div').show();
}

.ThisClass > div {
  border: 1px solid #ccc;
  padding: 3pt;
}

Vanilla-JavaScript solution

Answer 5

尝试使用 each() 函数

    $(".ThisClass> div").each(function (i) {
        if (i <=1)
            return true; // Skip first two divs
        else
            $(this).hide();

    });

显示两行后隐藏所有行

5 个答案: