隐藏div中的最后两项

Question

我有以下代码，其中我想隐藏div中的最后两项：

$('.toggleRoom').click(function() {
  $('.showRooms').slice(-2).remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="showRooms">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

但是它不起作用，最后两个div没有删除。

我想念什么？

Answer 1

您需要隐藏所选div的子级：

var children = $('.showRooms').children();

$('.toggleRoom').click(function() {
  // hide last 2
  children.show().slice(-2).hide();

  // or use remove if you want them removing instead of hiding:
  // children.slice(-2).remove();
});

$('.toggleRoom-1').click(function() {
  // hide all but last 2
  children.show().slice(0, -2).hide();

  // or use remove if you want them removing instead of hiding:
  // children.slice(0, -2).remove();
});

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

<div class="toggleRoom">click to hide last 2</div>

<div class="toggleRoom-1">click to hide all but last 2</div>

Answer 2

您需要执行$('.showRooms').find('div').slice(-2).remove()，因为div内有类div的三个showRooms，因此您需要使用来选择最后两个div slice(-2)。

$('.toggleRoom').click(function() {
  $('.showRooms').find('div').slice(-2).remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="showRooms">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>
<button class='toggleRoom'>Click</button>

基于您的评论，您需要删除除最后两个div之外的所有div：

$('.toggleRoom').click(function() {
  var elem = $('.showRooms').find('div');
  elem.slice(0, elem.length-2).remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="showRooms">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>
<button class='toggleRoom'>Click</button>

Answer 3

如果您的html与上述代码完全一样，则可以尝试以下操作：

$(".showRooms div:not(:first-child)");

否则请尝试以下功能之一！简单而简短：

function GetExpectFirstDivs(c/*count 4 ignore from first*/){
    return $(".showRooms>div:nth-child(n+"+(c+1)+")");
}
function GetExpectLastDivs(c){
    return $(".showRooms>div:nth-last-child(n+"+(c+1)+")");
}
function GetFirstDivs(c/*count*/){
    return !c?$():$(".showRooms>div:not(:gt("+(c-1)+"))");
}
function GetLastDivs(c){
    return !c?$():$(".showRooms>div:gt(-"+(c+1)+")");
}

现在，例如：我们如何删除除最后两（n）个div之外的所有div？：

GetExpectLastDivs(2/*n*/).remove();

Answer 4

您必须在其子级上使用选择器，而不要在div自身上使用

就像.showRooms > div（直接div子级）或.showRooms div（所有div子级）

$('.toggleRoom').click(function() {
    $('.showRooms > div').slice(-2).toggle();
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggleRoom">toggle rooms</button>

<div class="showRooms">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

要隐藏其他两个元素，请使用.not（）

请参见以下代码段

$('.toggleRoom').click(function() {
    var $lastTwo = $('.showRooms > div').slice(-2);
    $('.showRooms > div').not($lastTwo).toggle();
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggleRoom">toggle rooms</button>

<div class="showRooms">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

Answer 5

对于相同的HTML代码，您需要更改Js 唯一的问题是您忘记添加子元素类型

 $('.toggleRoom').click(function() {
        $('.showRooms > div').slice(-2).remove();
    });

另一种方法是

$(".showRooms div:not (:first-child)");

Answer 6

这是您所缺少的：

$('.toggleRoom').click(function() {
    $('.showRooms').children().slice(-2).remove();
});

Answer 7

您只需要在JS下面进行更改

$('.toggleRoom').click(function() {
   $('.showRooms div').slice(-2).remove();
});

Answer 8

您缺少div选择器，将其添加。

  $('.showRooms div').slice(-2).remove();

如果您想更具体一点，可以使用直接子选择器。

  $('.showRooms > div').slice(-2).remove();

另一个选择器：

$('.showRooms div:last-child').prev('div').andSelf().remove();

$('.toggleRoom').click(function() {
  $('.showRooms div').slice(-2).remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="showRooms">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

如果要删除除最后两个以外的所有内容，可以执行此操作。

 $('.showRooms div').slice(-2).addClass('preserve');
$('.showRooms div:not(.preserve)').remove();
$('.showRooms div).removeClass('preserve');

这是一次您可以做到的方式。

Answer 9

如果您只想隐藏最后两个项目，则只需使用CSS即可完成

.showRooms div:nth-last-of-type(1),
.showRooms div:nth-last-of-type(2) {
  display:none;
}

<div class="showRooms">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

如果您只想显示最后两个-然后翻转CSS以隐藏所有div，然后仅显示最后两个：

.showRooms div {display: none;
}

.showRooms div:nth-last-of-type(1),
.showRooms div:nth-last-of-type(2) {
  display:block;
}

<div class="showRooms">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Answer 10

我建议使用:gt() Selector：

$('.showRooms > div:gt(-3)').hide(); // hide last 2 items

$('.toggleRoom').on('click', function(e) {
    $('.showRooms > div:gt(-3)').hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="toggleRoom">click to hide last 2</button>

<div class="showRooms">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>