javascript - 如果使用 :nth-child 超过 3 个，则每个相同父 div 的 jQuery 切换嵌套 div

Question

我有 2 个相同的父级 div，但内容不同。如果父 div 有超过 3 个子 div，在 div 的末尾应该显示“显示更多”的文本，这将滑动所有剩余的隐藏 div。我是 JavaScript 和 jQuery 的新手，我不能完全理解选择器。这是我的代码:

<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>   
    <div class="child">4</div> 
    <div class="child">5</div> 
</div>
<span class="showhide">Show-hide</span>

<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
</div>
<span class="showhide">Show-hide</span>

<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>   
    <div class="child">4</div> 
</div>
<span class="showhide">Show-hide</span>

结果应该是这样显示的:

1
2
3
show-hide

1
2

1
2
3
show-hide

这是脚本:

$('.parent div:nth-child(n+4)').hide();

var l = $('.parent div').length;
if (l > 3) {
    $('.showhide').show();
} else {
    $('.showhide').hide();
}

$(".showhide").click(function() {
    $this.find(".parent div:nth-child(n+4)").toggle('slide');
});

只有代码的第一部分有效。它在每个父 div 中隐藏了超过 3 个 div。但是隐藏文本和切换不起作用。

我尝试了多种变体，比如将 span 放在父级 div 中，将选择器更改为 .closest，还尝试使用 :gt() 而不是 :nth-child 但都没有用。

Answer 1

你可以这样做，

$(".parent").each(function() {
  $(this).find(".child:gt(2)").hide();
});
$(".showhide").click(function() {
  $(this).prev().find(".child:gt(2)").slideToggle();
});

Fiddle

.gt() 选择器将返回索引大于指定参数的元素

如果您想在切换后更改文本，请使用此代码，

$(".parent").each(function() {
  $(this).find(".child:gt(2)").hide();
});
$(".showhide").click(function() {
  var obj = this;
  $(this).prev().find(".child:gt(2)").slideToggle(function() {
    if ($(this).is(":visible"))
      $(obj).text("hide");
    else
      $(obj).text("show more");
  });
});

Edited Fiddle

请注意，您需要使用slideToggle的回调函数来更改文本，因为slideToggle是异步的。

Final Fiddle